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提供了一些好处，例如通过选择作为理解的一部分来分配模型的更灵活性通过不为每个重复实例创建新范围来减少内存和提高速度。“

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 个答案: