Ang-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是在循环相对到当前元素因为你排数组，那么你需要保存从指令中引用对象本身（例如，您可以使用person.id（如果每个人都有唯一的id）。

您可以通过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>

Answer 2

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