Angular ng-repeat vs ng-option

Question

我正在使用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'];
}

Answer 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作為解析表達式的一部分分配模型時，具有更大的靈活性，並且另外，通過不為每個重復的實例創建新的作用域來減少內存並提高速度。”

Answer 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用戶可能會有所啟發。

Angular ng-repeat vs ng-option

問題描述

2 個解決方案

解決方案1
2 已采納 2016-02-23 21:16:23

解決方案2
0 2016-02-23 21:12:06

Angular ng-repeat vs ng-option

問題描述

2 個解決方案

解決方案1 2 已采納 2016-02-23 21:16:23

解決方案2 0 2016-02-23 21:12:06

解決方案1
2 已采納 2016-02-23 21:16:23

解決方案2
0 2016-02-23 21:12:06