从ng-repeat中选择时，仅显示json中的一项

Question

I have a list of questions being pulled in and when they are clicked I want it to show just that question along with the possible answers but I cant work out how to do that.

I have made an example plunker here:

http://plnkr.co/edit/iFOLsZawzJURegD2YZ1x?p=preview

To keep SO happy, here is my app.js

angular.module('foo', ['ui.router'])

.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/q1');

    $stateProvider

    .state('results', {
        url: '/results',
        templateUrl: 'results.html'
    })

    .state('list', {
        url: '/questions',
        templateUrl: 'list.html',
        controller: 'questionsCtrl'
    })

    .state('question', {
        url: '/questions/:questionID',
        templateUrl: 'question.html',
        controller: 'questionsCtrl'
    })

})

.controller('questionsCtrl', function($scope, $stateParams) {

    $scope.questionID = $stateParams.questionID;
    $scope.list = [
        {
            "award":"Best in the world",
            "nominees": [
                {
                    "name":"Bob",
                    "age":"53"
                },
                {
                    "name":"Hilary",
                    "age":"44"
                }
            ]
        },
        {
            "award":"Best in the land",
            "nominees": [
                {
                    "name":"Sally",
                    "age":"22"
                },
                {
                    "name":"John",
                    "age":"66"
                }
            ]
        }
    ];

});

Answer 1

Does this work for you?

list.html

<ul>
    <li ng-repeat="qwerty in list">
        <a ui-sref="question({questionID: {{ $index }} })">Question {{$index + 1}}. {{ qwerty.award }}</a>
    </li>
</ul>

question.html

<div>
    {{ questionID }} <br>
    <li ng-repeat="qwerty in list" ng-show="$index == questionID">
      {{ qwerty.award }}
      <div ng-repeat="nom in qwerty.nominees" style="margin-left:8px">
        {{ nom.name }}
      </div>
    </li>
</div>

Answer 2

I have updated your plunker, please check it here http://plnkr.co/edit/mubfDn3zRa0g9nkCK0ya?p=preview

I have changed your controller to assign the question to the scope using state param id

.controller('questionsCtrl', function($scope, $stateParams) {

$scope.list = [
    {
        "award":"Best in the world",
        "nominees": [
            {
                "name":"Bob",
                "age":"53"
            },
            {
                "name":"Hilary",
                "age":"44"
            }
        ]
    },
    {
        "award":"Best in the land",
        "nominees": [
            {
                "name":"Sally",
                "age":"22"
            },
            {
                "name":"John",
                "age":"66"
            }
        ]
    }
];
//alert($stateParams.questionID);
$scope.question = $scope.list[$stateParams.questionID];

});

Answer 3

In question .html use this

<br>
<div>
    Q{{ questionID+1 }}.{{list[questionID].award}} ?
</div>
<br>
<div ng-repeat="nominee in list[questionID].nominees">
  {{$index+1}}.{{nominee.name}},{{nominee.age}}
</div>

I have changed your questionID to represent list index instead of using q prefix

Also make questionId int

 $scope.questionID = parseInt($stateParams.questionID);

Working Demo: http://plnkr.co/edit/qIb07wvqciCfc1VarVnO?p=preview