angular-bootstrap accordion databinding issue

问题

I have 2 drop downs with same models, one inside accordion and another outside. The outside drop down works fine in terms of 2-way databinding but the one inside the accordion seems to have only 1-way binding, in other words selecting in the UI is not setting the model value. I found a suggestion here that using ng-change will fix this problem. It fixed for <textarea> but not for <select>. Wondering this could be bug in angular-ui. Can someone help on this issue. Thanks in advance!

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

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

my model categories is an array of string:

example:

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

ng-change function

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

回答1:

Binding to an attribute of the scope directly is almost a bad idea, because many directives define their own scope, and if your widget (the select box) is inside such a directive, you will in fact bind to an attribute of the child scope rather than binding to an attribute of the controller scope.

The rule of thumbs is thus: always have a dot in your ng-model. The form controls should modify an object of your scope, and not your scope directly.

In your controller:

$scope.selection = {};

In your view:

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

Also, note that you're using the same ID to identify two select boxes. That will make your DOM invalid. An ID identifies an element uniquely.

来源：https://stackoverflow.com/questions/24592752/angular-bootstrap-accordion-databinding-issue

标签

javascript

angularjs

angular-ui