javascript - angular-bootstrap Accordion 数据绑定(bind)问题

Question

我有 2 个相同型号的下拉菜单，一个在 Accordion 内，另一个在 Accordion 外。外部下拉列表在 2 向数据绑定(bind)方面工作正常，但 Accordion 内部的下拉菜单似乎只有 1 向绑定(bind)，换句话说，在 UI 中选择不会设置模型值。我找到了一个建议 here使用 ng-change将解决这个问题。它固定为 <textarea>但不适用于 <select> .想知道这可能是 angular-ui 中的错误.有人可以帮助解决这个问题。提前致谢!

Accordion 外

 <div class="form-group">
              <label class="col-md-2 control-label" for="category">Category</label>
              <div class="col-md-3">
                <select id="category" ng-model="category" name="category" type="text" class="form-control">
                    <option ng-repeat="category in config.categories.sort()"  value="{{category}}">
                    {{category}}</option>
                </select>
              </div>
            </div> 

内部 Accordion

<accordion close-others="false">
    <accordion-group>
 <div class="form-group">
              <label class="col-md-2 control-label" for="category">Category</label>
              <div class="col-md-3">
                <select id="category" ng-model="category" ng-change="setCategory(category)"  name="category" type="text" class="form-control">
                    <option ng-repeat="category in config.categories.sort()"  value="{{category}}">
                    {{category}}</option>
                </select>
              </div>
            </div> 
  </accordion-group>
  </accordion>

我的模型 categories是一个字符串数组:

例子:

"categories": [
            "Admin API",
            "Admin License",
            "adminGUI",
            "antennahouse",
            "App Builder",
            "Backup/Restore",
            "Basis"]

ng-change 函数

 $scope.setCategory = function(category) {
     $scope.category = category;
 };

Answer 1

直接绑定(bind)到作用域的属性几乎是个坏主意，因为许多指令定义了它们自己的作用域，如果你的小部件(选择框)在这样的指令中，你实际上会绑定(bind)到子作用域，而不是绑定(bind)到 Controller 作用域的属性。

因此，经验法则是:在您的 ng-model 中始终有一个点。表单控件应该修改您范围内的一个对象，而不是直接修改您的范围。

在你的 Controller 中:

$scope.selection = {};

在你看来:

<select ng-model="selection.category" ...>

另请注意，您使用相同的 ID 来标识两个选择框。这将使您的 DOM 无效。 ID 唯一标识一个元素。