角度 ng 重复与 ng 选项

Angular ng-repeat vs ng-option

本文关键字：ng 选项 角度      更新时间：2023-09-26

我在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>

棱角分明.js

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

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

<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-重复或 ng 选项。 根据此处的文档：https://docs.angularjs.org/api/ng/directive/select

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

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

 <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用户可能会提供一些信息。

相关文章：