Question

我使用alpine:3.5构建带有单选按钮的表。我们的想法是为每个无线电值分配原始数组内对象的位置（在排序之前）。当我使用$ index时，它在有序数组中分配位置而不是原始数组。如何分配正确的索引，原始索引？

ng-repeat

Answer 1

$ index不会起作用，因为它代表循环索引，而不是数组中项目的索引。所以要解决这个问题，你可以在源代码中使用索引属性，或者你可以编写一个函数来返回相关的索引。

＆＃13;

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']);

＆＃13;

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

＆＃13;

Answer 2

正如我在评论中所写：

$index与循环中的当前元素相对，并且由于您正在对数组进行排序，因此您需要从指令中保存对象本身的引用（您可以使用例如person.id（如果每个人都有一个唯一的id）。

您可以通过ngValue
保存对所选人员的引用

＆＃13;
＆＃13;
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"}]; });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

这里我使用ngValue并保存对循环内所选对象的引用。我并不关心对象的当前位置，因为angularjs确保所选人员可以通过$scope.selected.person在控制器中使用。

如果您想预先选择一个人，请替换

$scope.selected = { person: null };

使用

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

但不要忘记之前宣布$scope.persons！将之后的行放在控制器中声明数组。例如：

＆＃13;
＆＃13;
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] }; });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

角度ng重复值集

2 个答案: