Angular ng-repeat 与 ng-option答案

【问题标题】：Angular ng-repeat vs ng-optionAngular ng-repeat 与 ng-option
【发布时间】：2016-02-24 06:31:58
【问题描述】：

我正在使用 AngularJS 中的 ng-options 和 ng-repeat 来玩弄下拉菜单。我这里有两个菜单以不同的方式实现。

两个问题： 1）为什么这不起作用，无法按预期选择 2) 哪种方式更好？

  <body ng-controller="appController" class="container-fluid">
    <form>
      <label for="sizes"> Select size: </label>
       <select name= "sizes" id= "sizes" ng-model="sizes">
         <option ng-repeat="size in sizes" value="{{size}}"></option>
       </select> 

      <br>

      <label for="sizes"> Select size: </label>
      <select name = "sizes" id = "sizes" ng-model="sizes" ng-options="item for item in sizes track by item">
        <option value="{{size}}"></option>
      </select>
    </form>
  </body>

在 angular.js 中

app.controller('appController', function($scope) {
    $scope.sizes = ['big', 'medium', 'small'];
}

【问题讨论】：

标签： javascript html angularjs angularjs-ng-repeat ng-options

【解决方案1】：

不确定您到底在问什么，但我认为您不希望 $scope.sizes 成为您的模型。所以尝试这样的事情：

<select ng-model="pickedSize.size" ng-options="size for size in sizes">
    <option value="">Pick a size...</option>
</select>

控制器：

app.controller('appController', function($scope) {
    //to demonstrate setting a model...can do this various ways.
    $scope.pickedSize={};
    $scope.pickedSize.size='';

    $scope.sizes = ['big', 'medium', 'small'];
}

ng-repeat 或 ng-options 哪个更好。根据此处的文档：https://docs.angularjs.org/api/ng/directive/select

“在许多情况下，可以在元素上使用 ngRepeat 而不是 ngOptions 来获得类似的结果。但是，ngOptions 提供了一些好处，例如在如何通过 select 作为理解的一部分分配 's 模型时更加灵活表达式，此外还通过不为每个重复实例创建新范围来减少内存并提高速度。”

【讨论】：

如果我想将pick选项发送到后端，我会发送pickSize.size吗？
即使没有 $scope.pickedSize={}; 这似乎也有效和 $scope.pickedSize.size='';那为什么要有它们？
因为你想设置一个模型。是的，你会发送pickSize.size。
感谢它绝对是一种解决方案。您如何看待这里的其他解决方案以及 ng-options vs ng-repeat？

【解决方案2】：

请使用以下更正查看选择值

 <form>
      <label for="sizes"> Select size: </label>
       <select name= "selectSizes" id= "selectSizes" ng-model="sizes" >
        <option ng-repeat="size in sizes" value="{{size}}">**{{size}}**</option>
       </select> 

      <br>

      <label for="sizes"> Select size: </label>
      <select name = "sizes" id = "sizes" ng-model="sizes" ng-options="item for item in sizes track by item">
        <option value="{{size}}">**{{size}}**</option>
      </select>
    </form>

在http://plnkr.co/edit/SDNrwpcu6E94VSVv3sWR?p=preview 测试

关于哪个更好，没有性能损失，您可以选择始终保持一致。也许其他一些 SO 用户可能会有所启发。

【讨论】：

在那个plunker中，一旦你做出选择就不能选择其他任何东西了？
@jebmarcus 因为 {{}} 是双重绑定，它会更新模型。改用一种方式绑定。
无论如何你可以演示一下单向绑定是什么样子的？
一旦做出选择，表格仍应允许您选择其他选项
你看到我的回答了吗？