Question

我有一个任务列表： [{ 标题：“Title1”，位置：“9” }，{ 标题：“Title2”，位置：“1” }，{ 标题：“Title3”，位置：“5” }，{ 标题：“Title4”，位置：“7” }] 我正在尝试创建一个＆lt; select＆gt;列表，其中每个列表都是list.lenght long并且具有选定的值。 html片段：＆lt; table cellpadding =“0”cellspacing =“0”border =“0”＆gt; ＆LT; TR＆GT; ＆lt; td class =“ms-authoringcontrols”＆gt;＆lt; b＆gt; Title＆lt; / b＆gt;＆lt; / td＆gt; ＆lt; td class =“ms-authoringcontrols”＆gt;＆lt; b＆gt; Position＆lt; / b＆gt;＆lt; / td＆gt; ＆LT; / TR＆GT; ＆lt; tr ng-repeat =“t in tasks”＆gt; ＆LT; TD＆GT; ＆lt; a href =“TODO”＆gt; {{t.Titel}}＆lt; / a＆gt; ＆LT; / TD＆GT; ＆LT; TD＆GT; ＆lt; select ng-model =“t.Position”ng-options =“t.Position as tasks.indexOf（i）+1 for i in tasks”＆gt;＆lt; / select＆gt; ＆LT; / TD＆GT; ＆LT; / TR＆GT; ＆LT; /表输出：它缺少的是每个＆lt; select＆gt;的选定值（位置）。我知道通过定义ng-model并且ng-model =“t.Position”设置错误来设置值，但是如何将每个项目的Position值设置为其相关的select元素？每个选择的＆lt;选项＆gt;应该是任务的长度，并从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>

（如果您运行代码段，您会注意到第一个不是选中，那是因为[1,2,3,4]不包含9。）

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

2 个答案: