ng-repeat和ng-options之間有什麼區別，爲什麼它們的表現不一樣？

ng-options和ng-repeat如何區別？ng-repeat和ng-options之間有什麼區別，爲什麼它們的表現不一樣？

在下面的代碼，我有一個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' 
      ] 
     },

來源

2013-07-05 user1560634

使用然後將會有相同的行爲 –

ng-repeat爲每次迭代創建一個新的作用域，所以不會像ng-options那樣執行。

對於小列表來說，這並不重要，但是較大的列表應該使用ng-options。除此之外，它在指定迭代器方面提供了很大的靈活性，並且提供了比ng-repeat更好的性能優勢。

來源

2013-10-24 06:52:53 Krut

從the documentation：

注：ngOptions提供當你想選擇模型綁定到一個非字符串值應用來代替ngRepeat的元素的迭代設施。這是因爲選項元素目前只能綁定到字符串值。

This fiddle使得點更加清晰：選擇2將與選擇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>

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-05 04:10:48

在許多情況下，ngRepeat可以在元素，而不是ngOptions來實現類似結果。然而，ngOptions提供了一些好處，例如在通過選擇將模型分配爲理解表達式的一部分方面具有更大的靈活性，另外還通過不爲每個重複實例創建新範圍來減少內存和提高速度。

來源

2015-08-31 11:01:29 SSK

ng-repeat在發送信息回控制器時給出了問題，因爲通常我們向用戶顯示名稱，但是使用該選項的ID /索引作爲後端操作。

簡單的話 - 與你可以使用完整的JavaScript對象NG選項。

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName" ng-options="x.name for x in names"> </select>  {{selectedName}}  {{selectedName.age}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = [{"name":"Neeraj","age":"21"}, {"name":"John","age":"22"}, {"name":"David","age":"23"}]; }); </script> </body> </html>

但NG-重複你必須涉及串。

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <select ng-model="selectedName"> <option ng-repeat="x in names">{{x.name}}</option> </select>  {{selectedName}}  {{selectedName.age}} </div> <script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.names = [{"name":"Neeraj","age":"21"},{"name":"John","age":"22"},{"name":"David","age":"23"}]; }); </script> <p>This example shows how to fill a dropdown list using the ng-repeat directive.</p> </body> </html>

來源

2017-02-07 07:53:02

ng-options是專爲填充下拉列表項目而設計的指令。下拉菜單中使用ng-options的一個主要優點是，它允許我們將選定的值傳遞給對象。而使用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-25 15:23:29 Nickhil

ng-repeat和ng-options之間有什麼區別，爲什麼它們的表現不一樣？

回答

相關問題