25

ng-optionsと のng-repeat違いは？

次のコードには、ng-repeat人のリストを反復処理する があります。

 <select ng-model="selectedPerson" >
          <option ng-repeat="obj in people" value="{{obj.id}}">{{obj.name}}</option>
  </select>

を使用する場合の同等の選択ボックスであると私が信じているものは次のng-optionsとおりです。

 <select ng-model="selectedPerson" ng-options='obj.name for obj in people'></select>

私は彼らが同じように振る舞うことを期待しますが、そうではありません。なんで？

$scope.people = [
        {
            id: 0,
            name: 'Leon',
            music: [
                'Rock',
                'Metal',
                'Dubstep',
                'Electro'
            ]
        },
4

5 に答える 5

26

ng-repeat は反復ごとに新しいスコープを作成するため、ng-options ほどには機能しません。

小さなリストでは問題ありませんが、大きなリストでは ng-options を使用する必要があります。それとは別に、イテレータを指定する際に多くの柔軟性を提供し、ng-repeat よりもパフォーマンス上の利点を提供します。

于 2013-10-24T06:52:53.797 に答える
10

ドキュメントから：

注: ngOptions は、選択モデルを文字列以外の値にバインドする場合に ngRepeat の代わりに使用する必要がある要素のイテレータ機能を提供します。これは、現在、オプション要素は文字列値にのみバインドできるためです。

このフィドルは要点をより明確にします: select2 は select 1 にバインドしますが、その逆はバインドしません。ボタンをクリックすると、理由が明らかになります:-)

HTML

<div ng-app ng-controller="MyCtrl">
  <select ng-model="selectedPerson" >
    <option ng-repeat="obj in people" value="{{obj.id}}">
      {{obj.name}}
    </option>
  </select>
  <select ng-model="selectedPerson" 
    ng-options="p.id as p.name for p in people">
  </select>
  selected: {{selectedPerson}} {{typeofSelectedPerson()}}
    <button ng-click="selectedPerson=2">Jao</button>
    <button ng-click="selectedPerson='1'">Ze</button>
</div>

JS

function MyCtrl($scope){
    $scope.selectedPerson = 1;
    $scope.people = [
        {
            id: 1,
            name: 'Ze'
        },
        {
            id: 2,
            name: 'Jao'
        }
    ];

    $scope.typeofSelectedPerson = function(){
        return typeof $scope.selectedPerson;
    }
}
于 2014-03-05T04:10:48.780 に答える
3

多くの場合、要素で ngOptions の代わりに ngRepeat を使用して、同様の結果を得ることができます。ただし、 ngOptions には、内包表記の一部として選択を介して のモデルを割り当てる方法の柔軟性が向上し、さらに、繰り返されるインスタンスごとに新しいスコープを作成しないことでメモリが削減され、速度が向上するなど、いくつかの利点があります。

于 2015-08-31T11:01:29.677 に答える
3

ng-options は、ドロップダウン リストの項目を入力するために特別に設計されたディレクティブです。ドロップダウンに ng-options を使用する主な利点の 1 つは、選択した値をオブジェクトとして渡すことができることです。一方、ng-repeat を使用すると、選択した値は文字列のみになります。

<select ng-model="selectedPerson" >
      <option ng-repeat="obj in people" value="{{obj.id}}">{{obj.name}}</option>
</select>
<h1> Id of the selected item is : {{selectedPerson}}</h1>

上記の方法を使用すると、selectedPerson の値は常に文字列になります。

<select ng-model="selectedPerson" ng-options='obj.name for obj in people'></select>
 <h1> Id of the selected item is : {{selectedPerson.id}}</h1>
 <h1> Name of the selected item is : {{selectedPerson.name}}</h1>

ここでは、選択した人物の値がオブジェクトであるため、完全なオブジェクトを渡すことで、オブジェクトの必要なフィールドを出力できます。

于 2017-05-25T15:23:29.873 に答える