角引导手风琴数据绑定问题

Question

我有 2 个相同型号的下拉菜单，一个在手风琴内部，另一个在外部。 就 2 路数据绑定而言，外部下拉菜单工作正常，但手风琴内部的下拉菜单似乎只有 1 路绑定，换句话说，在 UI 中选择并没有设置模型值。我发现了一个建议 here 使用 ng-change 将解决这个问题。它修复了<textarea>，但不适用于<select>。 想知道这可能是angular-ui 中的错误。有人可以帮助解决这个问题。提前致谢！

手风琴外

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

直接绑定到作用域的属性几乎是一个坏主意，因为许多指令定义了自己的作用域，如果你的小部件（选择框）在这样的指令内，你实际上会绑定到子作用域而不是绑定到控制器作用域的属性。

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

在您的控制器中：

$scope.selection = {};

在你看来：

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

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