根据选择输入更新 ngRepeat 数组答案

【问题标题】：Update ngRepeat array based on select input根据选择输入更新 ngRepeat 数组
【发布时间】：2015-03-08 09:55:27
【问题描述】：

Angular.js 快把我逼疯了，Ben Nadel 的 angular.js roller coster 可能让我保持清醒！

假设我们有这个基本控制器：

function ResultsCtrl($scope) {$scope.results = {
'Autumn 2011': {
     'Courses': [{code: 'GS515', 'grade': 80}, {code: 'GS505', 'grade': 60}],
     'Statistics': [{}]
               },
'Autumn 2012': {}/*SIMILAR DATA STRUCTURE*/
$scope.selectedPeriod = 'Autumn 2011';/*FOR INITIALISING THE DATA*/
};

然后在html 代码中，ng-repeat 用于基于选择的数组：

<div ng-app>
<div ng-controller="ResultsCtrl">
    <div>
        <select ng-options="period as period for (period, result) in results" ng-model="selectedPeriod"></select>
    </div>
     <div ng-repeat="course in results['{{selectedPeriod}}']['Courses']">
        <p>Course: {{ course.code }}, Grade: {{ course.grade }}</p>
    </div>
</div>

以上是我的第一种方法，然后我尝试在ng-repeat 中对数组进行硬编码，以查看问题出在哪里并且运行良好：<div ng-repeat="course in results['Autumn 2011']['Courses']">。下一种方法尝试使用控制器来选择阵列。这已添加到脚本中：$scope.periodResults = $scope.results[$scope.selectedPeriod]['Courses']; 和 periodResults 用于 ng-repeat 但它不起作用，默认数组已正确加载但 <select> 标记无效。

我看到过有关类似问题的问题和博客文章，但它们没有帮助。所有这些都与我不明白的$scope.apply() 或$timeout 有关。

【问题讨论】：

你确定你发布的小提琴正确吗？
我把fiddle去掉了，确实错了！

标签： angularjs

【解决方案1】：

$scope.results 缺少右括号：

function ResultsCtrl($scope) {$scope.results = {
'Autumn 2011': {
     'Courses': [{code: 'GS515', 'grade': 80}, {code: 'GS505', 'grade': 60}],
     'Statistics': [{}]
               },
'Autumn 2012': {}/*SIMILAR DATA STRUCTURE*/
} /* this closing brace was missing */
$scope.selectedPeriod = 'Autumn 2011';/*FOR INITIALISING THE DATA*/
};

在您的模板中，您在引用 selectedPeriod 模型时错误地使用了角度表达式。以下是您的模板的外观：

<div ng-app>
<div ng-controller="ResultsCtrl">
    <div>
        <select ng-options="period as period for (period, result) in results" ng-model="selectedPeriod"></select>
    </div>
     <div ng-repeat="course in results[selectedPeriod]['Courses']">
        <p>Course: {{ course.code }}, Grade: {{ course.grade }}</p>
    </div>
</div>

请注意使用 [selectedPeriod] 而不是 ['{{selectedPeriod}}'] 就像您在代码中使用的那样。

【讨论】：

简单但很棒！，非常感谢。