Question

我是Angular的新手，刚刚开始使用我的第一个应用程序来尝试熟悉它，但我已经碰到了一堵墙，希望有人可以轻松回答。

我有一个问题列表，当点击它们时，我希望它能够显示该问题以及可能的答案，但我不知道如何做到这一点。

我在这里做了一个例子：

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

为了保持高兴，这是我的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

这对你有用吗？

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

我已更新您的plunker，请在此处查看http://plnkr.co/edit/mubfDn3zRa0g9nkCK0ya?p=preview

我已更改您的控制器，使用州参数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

有问题.html使用此

<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>

我已将您的questionID更改为代表列表索引，而不是使用q前缀

同时制作questionId int

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

工作演示： http://plnkr.co/edit/qIb07wvqciCfc1VarVnO?p=preview

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

3 个答案: