NG 반복 내부 NG-옵션을 사용하여 <select> NG 모델을 결합하는 방법

Question

나는 작업의 list 있습니다

[{ 
    Titel: "Title1", 
    Position: "9" 
},{ 
    Titel: "Title2", 
    Position: "1" 
},{ 
    Titel: "Title3", 
    Position: "5" 
},{ 
    Titel: "Title4", 
    Position: "7" 
}] 

가 나는 list 각이 <select>들로 만들려고 해요 list.lenght 길이 선택한 값을가집니다. 표시되는 HTML 스 니펫 :

는

<table cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
     <td class="ms-authoringcontrols"><b>Title</b></td> 
     <td class="ms-authoringcontrols"><b>Position</b></td> 
    </tr> 
    <tr ng-repeat="t in tasks"> 
     <td> 
      <a href="TODO">{{t.Titel}}</a> 
     </td> 
     <td> 
      <select ng-model="t.Position" ng-options="t.Position as tasks.indexOf(i)+1 for i in tasks"></select> 
     </td> 
    </tr> 
</table 

출력 : 결측

각 <select>의 선택된 값 (위치)이다. 값을 설정하는 방법이 정의되어 있고 ng-model="t.Position"이 잘못되었지만 각 항목의 Position 값을 관련 select 요소로 설정하려면 어떻게해야합니까? 각 select의 <option>은 작업 길이 여야하며 1에서 n까지 정렬해야합니다.

Answer 1

, 당신이 찾고있는 ngOptions 형식은 select 모델에 할당됩니다 값이 select as label for value in array이다. 귀하의 경우 위치에

문자열, 그래서 우리는 모델 일치하도록 너무 문자열 select 변환해야합니다

ng-options="(tasks.indexOf(i)+1).toString() as tasks.indexOf(i)+1 for i in tasks" 
      ^model value     ^display 

(tasks.indexOf(i)+1+'' 너무 일 것이다)

angular 
 
    .module('Test', []) 
 
    .controller('TestCtrl', function($scope) { 
 
    $scope.tasks = [{ 
 
      Titel: "Title1", 
 
      Position: "9" 
 
     },{ 
 
      Titel: "Title2", 
 
      Position: "1" 
 
     },{ 
 
      Titel: "Title3", 
 
      Position: "3" 
 
     },{ 
 
      Titel: "Title4", 
 
      Position: "2" 
 
     }]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="Test" ng-controller="TestCtrl"> 
 
    <table cellpadding="0" cellspacing="0" border="0"> 
 
     <tr> 
 
      <td class="ms-authoringcontrols"><b>Title</b></td> 
 
      <td class="ms-authoringcontrols"><b>Position</b></td> 
 
     </tr> 
 

 
     <tr ng-repeat="t in tasks"> 
 
      <td> 
 
       <a href="TODO">{{t.Titel}}</a> 
 
      </td> 
 
      <td> 
 
       <select ng-model="t.Position" ng-options="(tasks.indexOf(i)+1).toString() as tasks.indexOf(i)+1 for i in tasks"></select> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <pre>{{tasks|json}}</pre> 
 
</div>

을

(스 니펫을 실행하면 f irst는 이 아니므로 [1,2,3,4]에 9가 포함되어 있지 않습니다.)

Answer 2

항목의 순서를 변경하려면 별도의 배열에서 위치를 추적해야합니다.

여기 당신은 매우 가까운 작업 예를

angular.module("app", []).controller("myCtrl", function($scope){ 
 
$scope.tasks = [{ 
 
    Titel: "Title1", 
 
    Position: "9" 
 
},{ 
 
    Titel: "Title2", 
 
    Position: "1" 
 
},{ 
 
    Titel: "Title3", 
 
    Position: "5" 
 
},{ 
 
    Titel: "Title4", 
 
    Position: "7" 
 
}]; 
 
$scope.positions = ["1","2","3","4","5","6","7","8","9"]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="myCtrl"> 
 
    <table cellpadding="0" cellspacing="0" border="0"> 
 
    <tr> 
 
     <td class="ms-authoringcontrols"><b>Title</b></td> 
 
     <td class="ms-authoringcontrols"><b>Position</b></td> 
 
    </tr> 
 
    <tr ng-repeat="t in tasks | orderBy: 'Position'"> 
 
     <td> 
 
      <a href="TODO">{{t.Titel}}</a> 
 
     </td> 
 
     <td> 
 
      <select ng-model="t.Position" ng-options="i for i in positions"></select> 
 
     </td> 
 
    </tr> 
 
</table> 
 
</div>