Question

后端定义的数据类型，我应该在angularjs中动态呈现。后端可能会定义“性是枚举，价值观是男性和女性”。

    {
  'name': 'sex',
  'type': 'enum',
  'options': ['female','male'],
  'wert': 'male'
}

我可以很容易地使用选择：

<select ng-model="wert" ng-options="value for ( key,value) in  options"></select>

但更喜欢像

这样的按钮组

<div class="btn-group">
  <label class="btn btn-primary" ng-model="wert" uib-btn-radio="'male'">male</label>
  <label class="btn btn-primary" ng-model="wert" uib-btn-radio="'female'">female</label>
</div>

现在我尝试让这些按钮动态化......

<div class="btn-group" ng-repeat='option in options'>
  <label class="btn btn-primary" ng-model="wert" uib-btn-radio="'{{option}}'">{{option}}</label>
</div>

我失败了。看起来很直接对我说。但为什么动态按钮组无法解决？似乎没有连接到我的范围？

我可能不会在这里抓住一些基本的角度概念？该代码将被置于一个指令中，但这可能与该问题无关。

非常感谢任何帮助。

Answer 1

您不应将{{}}插值与值

一起使用

<div class="btn-group" ng-repeat='option in options'>
  <label class="btn btn-primary" ng-model="model.wert" uib-btn-radio="option">{{option}}</label>
</div>

我想指出的另一件事是，您需要定义模型以遵循Dot Rule，这样才能确保绑定以正确的方式工作。您应该选择Dot Rule的原因是，您已在ng-model内定义了ng-repeat，因此在外部上下文中无法使用ng-repeat确实会创建新的子范围原型继承当前运行的控制器）。

Demo here

angularjs：动态创建btn-grp

1 个答案: