Question

当值是一个对象数组时，我无法在（键，值）对中对 ng-options 进行预选，但如果我使用value.property那么我可以进行预选。

我在jsfiddle中写了一个例子，我能够通过key或value.property预选ng-option，但在我的情况下我需要整个数组

修改：我编辑因为[key，value]是[key，Array [Object]]而不是[key，Object]。我添加了一个新的html选择代码，以根据给定的答案显示正确的选择。

要知道你必须传入ng-model整套数组，尽管跟踪只是检查数组零。两种结构都应该相同。

HTML

<div ng-app="myApp" ng-controller="demoCtrl">
    <select name="first" ng-model="data" ng-options="key as value.templateId for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data}}</div>
    <br>
    <select name="second" ng-model="data2" ng-options="value.templateId as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is preselected! = {{data2}}</div>
    <br>
    <select name="third" ng-model="data3" ng-options="value as key for (key, value) in options">
        <option value="">Select template</option>
    </select>
    <div>Data is NOT preselected! = {{data3}}</div> :(

    <select name="forth" ng-model="data4" ng-options="key for (key, value) in                                
    options track by value[0].templateId">

      <option value="">Select template</option>
   </select>

<div>Solution! = {{data4}}</div>

角

var app = angular.module('myApp', []);

app.controller('demoCtrl', function($scope) {

    $scope.data = "for offer";
    $scope.data2 = "002";
    $scope.data3 = '{ templateId :"001" , color : "yellow"}';

   $scope.data = [
                   {"templateId":3,"color":"blue"},
                   {"templateId":4,"color":"dark blue"}
                 ];

   $scope.options =   {  
            "for offer": 
                 [
                   {"templateId":1,"color":"yellow"},
                   {"templateId":2,"color":"dark yellow"}
                 ],

           "no offer": 
                 [
                    {"templateId":3,"color":"blue"},
                    {"templateId":4,"color":"dark blue"}
                 ],

           "general": 
                 [
                    {"templateId":5,"color":"orange"},
                    {"templateId":6,"color":"dark orange"}
                 ]
        };
});

Answer 1

使用ngOptions时，您可以使用track by来确定正确绑定值的唯一标识符。此外，该值不能是一个字符串，它必须是一个像这样的对象：

$scope.data3 = { templateId :"001" , color : "yellow"};

你的模板：

<select name="third"
    ng-model="data3"
    ng-options="value as key for (key, value) in options track by value.templateId">
    <option value="">Select template</option>
</select>

在测试对象的相等性并确定所选值时，使用track by value.templateId会告诉ngOptions查看属性value.templateId。

更新了您的fiddle。

Answer 2

为了达到这个要求，你必须在ng-select中使用track by。 track by将帮助您将select选项与值标记绑定。您还应提供唯一ID字段以跟踪选择选项。

<select ng-model="data" ng-options="item.color for item in options  track by item.templateId">
</select>

在你的控制器中，options对象将是这样的

$scope.options = [{ templateId :"001" , color : "yellow"}, 
                  { templateId :"002" , color : "red"} ,    
                  { templateId :"003" , color : "green"}];

为了初始化选择选项，您可以通过

设置模型

$scope.data= $scope.options[0];

只有在select选项中使用track by属性时，才能初始化范围变量。在您的问题中，templateId是唯一ID

当value是对象数组时，ng-option预选（key，value）对的值

2 个答案: