嵌套在ng-repeat中的ng-options

Question

I'm having the angular feature issue where my select list has an empty first option, but this situation is a little different from the research I've done online. 我遇到了角度特征问题，我的选择列表中的第一个选项为空，但是这种情况与我在网上进行的研究有些不同。 When I place the select tag outside of the ng-repeat, there is no blank option as the default selected value. 当我将SELECT标签放在ng-repeat之外时，没有空白选项作为默认选择值。 When I place the select tag using the ng-option attribute within the ng-repeat, I have the blank issue. 当我在ng-repeat中使用ng-option属性放置选择标签时，出现空白问题。 I've tried setting the default value for the ng-model attribute on the select tag with no luck. 我试过为select标签上的ng-model属性设置默认值，但是没有运气。 Here is the html fragment: 这是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: 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

Similar to the answer of jusopi but here in a SO snippet: 与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

I had a hard time following what exactly it is that you wanted so I tried to do it the way I'd normally tackle a problem like this. 我很难理解您想要的是什么，因此我尝试以通常解决此类问题的方式来做到这一点。

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

There are a few problems I addressed in reworking your code: 在重新编写代码时，我解决了一些问题：

ttdSelect was not pointing to anything in your code. ttdSelect没有指向您的代码中的任何内容。 I assumed you meant to update the status value of the todo item so I assigned it to item.status 我以为您打算更新待办事项的状态值，所以我将其分配给item.status
I created a status option to match a falsy value when a todo item doesn't have a current status 当待办事项没有当前状态时，我创建了一个状态选项以匹配虚假值
I demonstrated that you can actually bypass ng-options on the <select> and instead use ng-repeat on the <option> element instead to make it a little easier to read. 我演示了您实际上可以绕过<select>上的ng-options ，而改为在<option>元素上使用ng-repeat ，以使其更易于阅读。

I hope this helps. 我希望这有帮助。 Keep in mind I did this in jade/coffeescript because I work faster and better that way. 请记住，我在翡翠/咖啡中这样做是因为我的工作方式越来越快。 You can easily see the compiled html/js if you need to. 如果需要，您可以轻松地查看已编译的html / js。

嵌套在ng-repeat中的ng-options

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-12-22 20:03:55

解决方案2
0 2015-12-22 19:56:53

嵌套在ng-repeat中的ng-options

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-22 20:03:55

解决方案2 0 2015-12-22 19:56:53

解决方案1
1 已采纳 2015-12-22 20:03:55

解决方案2
0 2015-12-22 19:56:53