ng-template - 如何将复选框绑定到一对对象的开/关状态

时间:2015-03-26 15:58:33

标签: angularjs

Angular newb在这里。

我正在尝试设置模板以显示“问卷调查”项目的集合。问卷项目可以是选择列表或复选框。每个问卷选择都有相关的成本。

EG:

{ "Name" : "Product Packaging", "Template" : "TemplateList",
  "Choices" : [ { "Box", 20 }, { "Tube", 30 } ] },
{ "Name" : "Custom Printing" , "Template" : "TemplateCheckbox",
  "Choices" : [ { true, 10 }, { false, 0 } ] }

模板:

<script type="text/ng-template" id="TemplateList.html">
    <div>{{configitem.Name}}</div>
    <div class="choiceValue">
        <select ng-model="configitem.CurrentChoice" ng-options="choice.Value for choice in configitem.Choices" ng-change="update()">
        </select>
    </div>
</script>
<script type="text/ng-template" id="TemplateCheckbox.html">
    <div>{{configitem.Name}}</div>
    <div>
        <input type="checkbox" ng-model="configitem.CurrentChoice.Value" ng-change="update()"/>
    </div>
</script>

HTML:

<div ng-controller="ConfiguratorCtrl">
    <div ng-repeat="configitem in model.ConfigurableItems">
        <div ng-include="configitem.Template + '.html'"></div>
    </div>
    <div>Price: {{model.CurrentPrice | currency}}</div>
</div>

我正在使用模板根据“模板”类型显示这些对象。这很好用。但是,我想找到一种方法来间接绑定到我的控制器的复选框项。我需要开启/关闭状态,以便复选框绑定到其中一个true / false“choice”对象。现在,它绑定到第一选择元素。有什么建议吗?

Fiddle

0 个答案:

没有答案