角度の繰り返し値の設定

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を使用して、ループ内の選択されたオブジェクトへの参照を保存してい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>

を経由して、選択した人への参照を保存することができます。 anglejsは選択された人物がコントローラ内で$scope.selected.personを介して利用できるようにするため、オブジェクトの現在の位置は気にしません。

あなたは人を選ぶ前にしたい場合は

、

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

で

$scope.selected = { person: null }; 

置き換えるしかし、前に$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は、配列内の項目のインデックスではなく、ループのインデックスを表します。したがって、これを修正するには、ソースで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>