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唯一標識元素。