ngOptions導致錯誤值的選項

我想呈現選擇框，但它不能按預期工作 - 選項值不正確。我查manual，根據它的數組的語法（在我的對象的情況下，數組）是ngOptions導致錯誤值的選項

select as label for value in array

因此，這裏是我在做什麼：

數據：

[{"id":"3","name":"asdasd","code":"asdads","group":"2","cost":"0"},{"id":"4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"}]

模板：

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products"></select>

渲染結果：

<select ng-model="productToBuy" ng-options="item.id as item.id for item in products" class="ng-pristine ng-valid"> 
    <option value="0" selected="selected">3</option> 
    <option value="1">4</option> 
</select>

正如我們所見，選項值不會設置爲項目的ID。

而且這可能是不正確的語法當源是數組，但試圖像這樣當i。具有相同的結果：

<select ng-model="productToBuy" ng-options="item.id as item.id for (key, item) in products"></select>

我把這個代碼上jsfiddle。任何幫助讚賞。

來源

2012-12-18 SET

您是否需要讓'

我們每週大約收到一篇這篇文章。 Angular使用索引作爲值，因爲它爲您處理所有事情。不要擔心，只需使用它。這允許你做一些事情，比如選擇在你的作用域中設置一個對象，而不僅僅是一個字符串或數字。 –

這是ngOptions指令（您看到的輸出，其中值是項目的索引，而不是您要從代碼示例中傳入的id屬性）的行爲。 ngOptions會將選定的選項數據綁定到您在ngModel中指定的變量。然後，您將使用數據綁定變量而不是選項元素本身的「值」。

HTML：

<select ng-model="selected" ng-options="item.name for item in items"></select> {{ selected }}

JS：

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
];

在上述例子中，$ scope.selected將代表實際選擇的項目。然後，您可以訪問任何選定項目的屬性：$ scope.selected.name，$ scope.selected.code ...等。

如果您需要預先選擇具有上述示例的項目，則可以執行以下操作：

$scope.items = [ 
    {"id": "3","name":"asdasd","code":"asdads","group":"2","cost":"0"}, 
    {"id": "4","name":"adrf fg df ","code":"dasfasd","group":"2","cost":"0"} 
]; 
$scope.selected = $scope.items[1]; // Pre-selected the 2nd item in your array

如果你仍然需要完全控制你的價值屬性，你最好使用NG重複指令，但要記住，如果你這樣做，你所選的項目將不會被綁定到數據你的模型。

編輯：注意在「選擇作爲標籤的數組值」語法：

在情況下，其有幫助，你的「item.id的項目。產品中的項目名稱「實際上是將ngModel指令中的變量設置爲您在語法選擇部分中指定的值，因此該表達式所做的是將標籤設置爲item.name，但綁定$ scope。選中item.id的值，而不是item的整個實例，所以如果你選擇了上面例子中的第一個項目，$ scope.selected將等於「3」，但它並沒有改變選項元素本身的價值屬性

來源

2012-12-18 14:22:50

您的id的JSON對象中的數據類型爲string，而$scope.selected的值爲integer。如果你將其中一個切換到另一個，它會正常工作！

這些選項的值仍然是0和1，但Angular的數據綁定爲您做了訣竅，並將您在表達式中指定的值（item.id as item.name）綁定到ng - 父元素的模型（select元素）。

來源

2012-12-18 14:00:58 Tryggve

如果您不需要select元素的ng-model，並要使用select元素的設定值，然後以這種方式實現它：

<select> 
    <option ng-repeat="item in items" value="{{item.value}}"> 
    {{item.text}} 
    </option> 
</select>

來源

2015-08-05 12:37:19

ngOptions導致錯誤值的選項

回答

相關問題