javascript - AngularJS:ui-select 将数据绑定(bind)回 select

Question

我正在使用 Angular js 1.3.4 版本并使用 ui-select。

我正在将复杂的多级 JSON 对象数组绑定(bind)到此 ui-select，它工作正常。因此用户可以在此选择中选择任何选项。当用户保存其他数据和此选择数据时，我将此信息保存在数据库中。所有这一切都很好。

我遇到的问题是如何将数据绑定(bind)回这个。这可能不仅仅是 ui-select 的问题，因为我也无法将数据绑定(bind)回文本框。

下面是我从数据库中获取的 json(经过一些修改后):

{
   "input1":{
      "set1":{
         "source":"uat1",
         "value":"value1"
      },
      "set2":{
         "source":"uat",
         "value":"value2",
         "options":[
            {
               "name":"option1"
            },
            {
               "name":"option2"
            }
         ]
      }
   },
   "input2":{
      "set3":{
         "source":"uat1",
         "value":"value3"
      },
      "set4":{
         "source":"uat",
         "value":"value4",
         "options":[
            {
               "name":"option3"
            },
            {
               "name":"option4"
            }
         ]
      }
   }
}

下面是我尝试绑定(bind)回数据的指令:

 <div class="form-group" ng-repeat="(name, set) in sets">
    <label>{{name}}</label>
    <ui-select name="{{inputName + $index}}" ng-model="set.value" theme="bootstrap" ng-if="set.source == 'uat'">
        <ui-select-match placeholder="Set">{{set.value.name}}</ui-select-match>
        <ui-select-choices repeat="ds in set.options | filter: $select.search track by $index">
            <div ng-bind-html="ds.name | highlight: $select.search"></div>       
        </ui-select-choices>
    </ui-select>
    <input type="text" ng-if="set.source == 'uat1'" name="{{inputName + $index}}" ng-model="set.value" />
</div>

上面的结果是，对于我的 ui-select，我可以看到选项，这意味着它与我传入的 json 数据正确绑定(bind)。 问题是显示的值。我在 ui-select 中看不到任何选择，我的文本框也是空的。

由于上述每个模型都是 ng-model = 'set.value' 我将其传递到我的 json 中。所以我认为这行得通，但行不通。

我相信我的 Json 中遗漏了一些东西。任何人都可以指出这里缺少什么，以便我可以看到我的 json 中的值字段到相应的控件。

谢谢。

Answer 1

在 AngularJS ui-select 中，ui-select-match 指令用于显示选择了哪个值并应显示在文本框中。您在此处显示了错误的数据 (set.value.name)。您需要使用 $select.selected.name 来显示所选值。

<ui-select-match placeholder="Set">{{$select.selected.name}}</ui-select-match>

您的 ui-select-choices 是对象，因此如果您想从 Controller 设置默认值，您的值需要是选项中存在的对象。因此，您可以通过为 ng-model set.value 分配正确的值来为 ui-select 设置默认值。

"value": {
    "name":"option1"
}