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>