角引导手风琴数据绑定问题 [英] angular-bootstrap accordion databinding issue

问题描述

我有2个与同款下拉菜单，1个内手风琴和另一个外面。
外部下拉正常工作中的2路数据绑定而言但一手风琴内似乎只有1路结合，换言之在UI中选择不设置模型值。我发现了一个建议<一href=\"http://stackoverflow.com/questions/22760785/make-an-accordion-with-angularjs-ui-bootstrap-an-using-the-ng-model/22762336#22762336\">here在使用 NG-变化将解决这个问题。它固定＆LT; TextArea＆GT; 而不是＆LT;选择＆GT; 。
想知道这可能是错误的角UI 。有人可以帮助解决这一问题。在此先感谢！

外手风琴

 ＆LT; D​​IV CLASS =表单组＆GT;
              ＆LT;标签类=COL-MD-2控制标签为=类别＆GT;分类和LT; /标签＆gt;
              ＆LT; D​​IV CLASS =COL-MD-3＆GT;
                ＆LT;选择一个id =类别NG-模式=类别NAME =类别类型=文本级=表格控＆GT;
                    ＆LT;选项NG重复=在config.categories.sort类别（）VALUE ={{类别}}＆GT;
                    {{类别}}＆LT; /选项＆GT;
                ＆LT; /选择＆GT;
              ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
 

里的手风琴

 ＆LT;手风琴近他人=false的＆GT;
    ＆LT;手风琴组＆gt;
 ＆LT; D​​IV CLASS =表单组＆GT;
              ＆LT;标签类=COL-MD-2控制标签为=类别＆GT;分类和LT; /标签＆gt;
              ＆LT; D​​IV CLASS =COL-MD-3＆GT;
                ＆LT;选择一个id =类别NG-模式=类别NG-变化=setCategory（类别）NAME =类别类型=文本级=表格控＆GT;
                    ＆LT;选项NG重复=在config.categories.sort类别（）VALUE ={{类别}}＆GT;
                    {{类别}}＆LT; /选项＆GT;
                ＆LT; /选择＆GT;
              ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
  ＆LT; /手风琴组＆gt;
  ＆LT; /手风琴与GT;
 

我的模型类别是字符串数组：

例如：

 类别：
            管理API
            管理许可证，
            adminGUI
            antennahouse
            应用构建
            备份还原，
            基础]
 

NG-转换功能

  $ scope.setCategory =功能（类）{
     $ scope.category =类别;
 };
 

解决方案

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

拇指规则是这样的：总是有你的NG-model的点。窗体控件应修改范围的对象，而不是你的直接范围。

在你的控制器：

  $ scope.selection = {};
 

在您的视图：

 ＆LT;选择NG模型=selection.category...＆GT;
 

另外请注意，您在使用相同的ID，以确定两个选择框。这将使你的DOM无效。一个ID标识的元素独特的。

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

解决方案

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.

这篇关于角引导手风琴数据绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！