Wie <select> ng-Modell ng-Optionen innerhalb eines ng-repeat

Question

Ich habe eine list von Aufgaben zu binden:

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

Ich versuche, ein list von <select> zu schaffen, wo jeder list.lenght lang und hat einen ausgewählten Wert. Die HTML-Schnipsel:

<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 

Ausgang:

Was es fehlt, ist der gewählte Wert (Position) jedes <select>. Ich weiß, dass der Wert festgelegt wird, indem Sie das ng-Modell definieren, und ng-model="t.Position" ist falsch, aber wie kann ich den Position-Wert jedes Elements zu seinem verwandten select-Element festlegen? Die <option> 's von jeder select sollte die Länge der Aufgaben sein und von 1 bis n bestellt werden.

Answer 1

Sie ganz in der Nähe sind, die ngOptions Format Sie suchen, ist select as label for value in array, wo select der Wert ist, die dem Modell zugeordnet wird.

In Ihrem Fall Position ist String, also müssen wir auch select um Zeichenfolge zu konvertieren, so dass es zu dem Modell passt:

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

(tasks.indexOf(i)+1+'' würde auch funktionieren)

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>

(Wenn Sie das Snippet ausführen, werden Sie die f bemerken Das erste ist nicht ausgewählt, weil [1,2,3,4] nicht 9 enthält.)

Answer 2

Wenn Sie die Reihenfolge des Elements ändern möchten, müssen Sie die Positionen in einem separaten Array verfolgen.

Hier ist ein funktionierendes Beispiel

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>