angular-bootstrap手风琴数据绑定问题

Question

我有两个相同型号的下拉,一个在手风琴内,另一个在外面.外部下拉在双向数据绑定方面工作正常,但手风琴内的一个似乎只有单向绑定,换句话说,在UI中选择不设置模型值.我在这里找到了一个建议,使用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模型中总是有一个点.表单控件应该修改范围的对象,而不是直接修改范围.

在你的控制器中:

$scope.selection = {};

在你看来:

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

另请注意,您使用相同的ID来标识两个选择框.这会使你的DOM无效.ID唯一标识元素.