角度ng-repeat值集

Question

我使用ng-repeat構造帶有單選按鈕的表。 想法是將對象的位置分配給每個無線電值在原始數組內的位置（在訂購之前）。 當我使用$ index時，它在有序數組中而不是原始數組中分配位置。 如何分配正確的索引，原始索引？

<tr class="restTable" data-ng-repeat="person in persons|orderBy:'name'">
<td> {{ person.name}}</td>
<td> <input type="radio" name="radio" ng-model="$parent.selectedPerson" value="{{$index}}"/></td>
</tr>

Answer 1

$ index無效，因為它表示循環索引，而不是數組中項目的索引。 因此，要解決此問題，您可以在源代碼中具有index屬性，或者可以編寫函數以返回相關索引。

 var app = angular.module('app', []); app.controller('ctrl', ['$scope', function(scope) { scope.persons = [{ name: 'ABC index 0' }, { name: 'EFG index 1' }, { name: 'XYX index 2' }]; scope.selectedPerson = "1"; scope.getIndex = function(item) { return scope.persons.indexOf(item); } }]) angular.bootstrap(document.body, ['app']); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-controller="ctrl"> Selected Person:- <pre>{{persons[selectedPerson] | json}}</pre> <hr/> <table> <tr class="restTable" data-ng-repeat="person in persons|orderBy:'name'"> <td> {{ person.name}}</td> <td> <input type="radio" name="radio" ng-model="$parent.selectedPerson" value="{{$parent.getIndex(person)}}" /> </td> </tr> </table> </div> 

Answer 2

正如我在評論中寫道：

$index相對於循環中的當前元素 ，由於您正在對數組進行排序，因此您需要從指令中保存對對象本身的引用（例如，可以使用person.id （如果您具有唯一的id ，每個人）。

您可以通過ngValue保存對所選人員的ngValue

 angular.module('app', []).controller('ctrl', function($scope) { $scope.selected = { person: null }; $scope.persons = [{id: 1, name: "person1"}, {id: 2, name: "person2"}, {id: 3, name: "person3"}]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table> <tr class="restTable" data-ng-repeat="person in persons|orderBy:'name'"> <td> {{ person.name}}</td> <td> <input type="radio" name="radio" ng-model="selected.person" ng-value="person"/></td> </tr> </table> <hr> <p>Selected Person:</p> <pre ng-bind="selected.person | json"></pre> </div> 

在這里，我使用ngValue並在循環內保存對選定對象的引用。 我不在乎對象的當前位置，因為angularjs通過$scope.selected.person確保所選的人在控制器中可用。

如果要預先選擇一個人，請替換

$scope.selected = { person: null };

同

$scope.selected = { person: $scope.persons[1] };

但是不要忘了聲明$scope.persons ！ 在您的控制器中聲明數組后 ， 在那一行。 例：

 angular.module('app', []).controller('ctrl', function($scope) { $scope.persons = [{id: 1, name: "3person1"}, {id: 2, name: "1person2"}, {id: 3, name: "4person3"}]; $scope.selected = { person: $scope.persons[1] }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table> <tr class="restTable" data-ng-repeat="person in persons|orderBy:'name'"> <td> {{ person.name}}</td> <td> <input type="radio" name="radio" ng-model="selected.person" ng-value="person"/></td> </tr> </table> <hr> <p>Selected Person:</p> <pre ng-bind="selected.person | json"></pre> </div>