Question

我有两个相同型号的下拉菜单，一个在手风琴内，另一个在外面。外部下拉在双向数据绑定方面工作正常，但手风琴内的一个似乎只有单向绑定，换句话说，在UI中选择不设置模型值。我发现使用ng-change的建议here将解决此问题。它已修复为<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

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

因此，拇指规则是：在你的模型中总是有一个点。表单控件应该修改范围的对象，而不是直接修改范围。

在您的控制器中：

$scope.selection = {};

在您看来：

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

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

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

1 个答案: