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

Question

我有 list 个任务：

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

我正在尝试创建 <select> 的 list，其中每个 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 设置的，ng-model="t.Position" 是错误的，但是如何将每个项目的 Position 值设置为其相关的 select 元素？每个 select 的 <option> 应该是任务的长度并从 1 到 n 排序。

Answer 1

如果您想更改项目的顺序，您需要跟踪单独数组中的位置。

这是一个工作示例

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>

Answer 2

你很接近，你正在寻找的 ngOptions 格式是 select as label for value in array，其中 select 是将分配给模型的值。

在你的情况下，Position 是字符串，所以我们也需要将 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>

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

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

How to bind <select> ng-model using ng-options inside a ng-repeat

javascript

angularjs

angularjs-ng-repeat

angular-ngmodel

angularjs-ng-options