如何在ng-repeat中使用ng-options绑定 ng-model

I have a list of tasks:

我有一个任务清单:

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

I'm trying to create a list of <select>, where each is list.lenght long and has a selected value. The html snippet:

我试图创建一个

<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

Output:

输出:

What it is missing, is the selected value (position) of each <select>. I Know the value is set by defining the ng-model and ng-model="t.Position" is wrong, but how can I set the Position value of each item to its related select element? The <option>'s of each select should be the length of the tasks and ordered from 1 to n.

它缺少的是每个

2 个解决方案

#1

You are very close, the ngOptions format you are looking for is select as label for value in array, where select is the value that will be assigned to the model.

您非常接近了，您正在寻找的ngOptions格式是选择为数组中的值的标签，其中的select是将分配给模型的值。

In your case Position is string, so we need to convert select to string too so it matches the model:

在你的情况下位置是字符串，所以我们也需要将select转换为string，以便它与模型匹配:

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

( tasks.indexOf(i)+1+'' would work too)

(task .index of (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>

(If you run the snippet you will notice the first is not selected, that's because [1,2,3,4] doesn't contain 9.)

(如果运行代码片段，您将注意到第一个没有被选中，这是因为[1,2,3,4]不包含9。)

#2

If you want to change the order of the item you need to keep track of the positions in a seperate array.

如果您希望更改项目的顺序，则需要跟踪独立数组中的位置。

Here's an working example

这是一个工作示例

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>

#1