javascript - 当值是对象数组时，ng-option 为(键，值)对预选择值

Question

当值是对象数组时，我无法从(键，值)对中进行预选择，尽管如果我使用 value.property 那么我可以这样做预选。

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

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

请注意，尽管跟踪仅检查数组零，但您必须传递到 ng-model 整组数组。两者结构应该相同。

Updated JSFiddel

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>

Angular

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来确定唯一标识符以正确绑定(bind)值。另外，该值不能是字符串，它必须是一个对象，如下所示:

$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 .