Question

我有一个阵列或'玩家'，每个玩家都有一个名字，一个分数和其他属性。

我的部分内容如下：

<select ng-model="personToAsk">
    <option value=''>Select who you want to ask</option>
    <option ng-repeat="p in players" value="{{$index}}">{{p.name}} ({{p.score}} points)</option>
</select>
<p>Selected player: {{selectedPerson.name}}

在我的控制器中：

$scope.selectedPerson = $scope.players[$scope.personToAsk];

但是{{selectedPerson.name}}没有输出任何内容。

如果我在我的播放器数组（$scope.selectedPerson = $scope.players[0];）中对索引进行硬编码，它会输出该人，但我如何变为动态，因此当在下拉列表中选择一个播放器时，它仅显示名称进一步下来。

如果我将{{personToAsk}}放在我的模板中，它会输出一个数字。

Answer 1

声明：

$scope.selectedPerson = $scope.players[$scope.personToAsk];

初始化时执行一次。那时$ scope.personToAsk没有价值。

因此，当select选择下拉列表中的值发生变化时，需要执行此语句。因此，您可以在“personToAsk”上创建一个手表，也可以选择一个ng-change。并在那里执行此声明。应该工作：）

观看示例：

$scope.$watch('personToAsk'), function() {
    $scope.selectedPerson = $scope.players[$scope.personToAsk] ;
}

ng-change示例：

<select ng-model="personToAsk" ng-change="selectPerson()"> <option value=''>Select who you want to ask</option> <option ng-repeat="p in players" value="{{$index}}"> {{p.name}} ({{p.score}} points) </option> </select>

在控制器中：

$scope.selectPerson = fucntion() {
    $scope.selectedPerson = $scope.players[$scope.personToAsk];
}

两者都应该有效：）

我个人更喜欢使用ng-options指令来渲染选项。

Answer 2

这一切似乎都搞砸了。我不知道变量'index'是什么等等。

您应该使用ngOptions来生成选择的选项。

假设你的控制器中有这个：

$scope.personToAsk = {};    
$scope.players = [
    { id: 1, name: 'John', score: 10},
    { id: 2, name: 'George', score: 15},
    { id: 3, name: 'James', score: 4}
];

然后在你看来，写下这个：

<select ng-model="personToAsk" 
    ng-options="p as (p.name + ' ' + p.score) for p in players">
</select>
<p>Selected player: {{personToAsk.name}}</p>

jsfiddle示例：http://jsfiddle.net/JoeSham/HB7LU/9008/

使用$ scope变量作为数组索引

2 个答案: