Question

我有一个角度功能问题，我的选择列表中有一个空的第一个选项，但这种情况与我在线完成的研究略有不同。当我将选择标记放在ng-repeat之外时，没有空白选项作为默认选择值。当我在ng-repeat中使用ng-option属性放置select标签时，我有空白问题。我已经尝试在select标签上设置ng-model属性的默认值而没有运气。这是html片段：

<tr ng-repeat="item in todo.items">
  <td>{{item.project}}</td>
  <td>{{item.action}}</td>
  <td>
    <select ng-model="ttdSelect" ng-change="moveItem(item.id, ttdSelect);" ng-options="option.name for option in todo.options track by option.name">    
    </select>
  </td>
</tr>

的javascript：

var items = [{"id" : 1, "name" : "ttd" , "action" : "do it"}];

var selectOptions = [{ "name" : "next", "value" : "nextUp"},
                       { "name" : "in progress", "value" : "inProgress"},
                       { "name" : "waiting", "value" : "waiting"},
                       { "name" : "done", "value" : "done"},
                       { "name" : "trash", "value" : "trash"}];

app.controller("appController", function ($scope)
{
  $scope.todo.items = items;
  $scope.todo.options = selectOptions;
}

Answer 1

类似于jusopi的答案，但这里是一个SO片段：

var app = angular.module('myApp', []);

var items = [{
  "id": 1,
  "name": "ttd",
  "action": "do it"
},
{
  "id": 2,
  "name": "zzz",
  "action": "do it 2"
}];

var selectOptions = [{
  "name": "next",
  "value": "nextUp"
}, {
  "name": "in progress",
  "value": "inProgress"
}, {
  "name": "waiting",
  "value": "waiting"
}, {
  "name": "done",
  "value": "done"
}, {
  "name": "trash",
  "value": "trash"
}];

app.controller("appController", function($scope) {
  $scope.todo = {};
  $scope.todo.items = items;
  $scope.todo.options = selectOptions;
  
  angular.forEach($scope.todo.items, function(item, key) {
    item.ttdSelect = $scope.todo.options[0];
  });
});

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="utf-8" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="appController">
  <div>
    <table class="table">
      <tr ng-repeat="item in todo.items">
        <td>{{item.project}}</td>
        <td>{{item.action}}</td>
        <td>
          <select ng-model="item.ttdSelect" 
          ng-change="moveItem(item.id, item.ttdSelect);" 
          ng-options="option.name for option in todo.options track by option.name">
          </select>
        </td>
      </tr>
    </table>
    <b>Trace:</b>
    <pre>
  items = {{todo.items | json}}
  </pre>
    <pre>
  options = {{todo.options | json}}
  </pre>
  </div>
</body>
</html>

Answer 2

我很难跟踪你想要的是什么，所以我尝试按照我通常解决这样的问题的方式来做。

示例 - http://codepen.io/jusopi/pen/PZzxPY

我在重新编写代码时遇到了一些问题：

ttdSelect未指向代码中的任何内容。我假设您打算更新待办事项的状态值，因此我将其分配给item.status
当todo项目没有当前状态时，我创建了一个状态选项以匹配 falsy 值
我证明您实际上可以在ng-options上绕过<select>，而是在ng-repeat元素上使用<option>，而不是让它更容易阅读。

我希望这会有所帮助。请记住，我在jade / coffeescript中做到了这一点，因为我的工作方式越来越快。如果需要，您可以轻松查看已编译的html / js。

ng-options嵌套在ng-repeat

2 个答案: