由于嵌套的ng-repeat,在表内共享ng-model

时间:2017-09-12 09:43:27

标签: javascript html angularjs

我在表格中使用ng-model时遇到了一些问题。表是根据我使用RESTful API服务从服务器获得的数据构建的,以下是我正在使用的数据的详细信息:

  • 我从服务器获取并保存的保险计划 在insurancePlans数组内
  • 保险我从服务器获取的项目和我正在存储的项目 在insuranceItems数组内

注意每个保险计划都有保险项目清单!

以下是HTML代码:

<table class="table" ng-init="$parent.getInsurancePlans();$parent.getInsuranceItems()">
    <colgroup>
        <col>
        <col ng-repeat="plan in $parent.insurancePlans" class="ng-class: $parent.selectedCol==$index ? 'selected-col' : ''">
    </colgroup>
    <thead>
        <th></th>
        <th class="centered-cell" ng-repeat="plan in $parent.insurancePlans">{{plan.name}}</th>
    </thead>
    <tbody>
        <tr ng-repeat="item in $parent.insuranceItems track by $index">
            <td>{{item.name}}</td>
            <td class="centered-cell" ng-repeat="plan in $parent.insurancePlans track by $index" ng-click="$parent.setSelectedColumn($index)">
                <img src="images/check.png" ng-show="$parent.showImg(plan.insuranceItems, item)"></img>
                <input contenteditable type="checkbox" checklist-model="selectedOptionalItems" checklist-value="item" ng-show="$parent.showCheckBox(item,plan)"  id="optional-insurance-plans" name="optionalInsurancePlans"/>
                <select contenteditable ng-model="selectedFranchiseOption[$parent.$index]" ng-show="$parent.showSelectOptions(plan,plan.insuranceItems, item)" class="form-control" name="franchise-options" id="franchise-options" required>
                    <option value="Each Insurance Plan has it's own list of Insurance Items">0</option>
                    <option value="{{item.franchise/2}}">{{item.franchise/2}}</option>
                    <option value="{{item.franchise}}">{{item.franchise}}</option>
                </select>
                <div ng-show="$parent.showFranchise(plan,plan.insuranceItems, item)" name="franchise" id="franchise">{{item.franchise}}</div>                                   
            </td>
        </tr>
    </tbody>
</table>

这些ng-show属性是有原因的,但您不需要关注它们,因为我100%确定它们与我遇到的问题无关。

Ng-model being shared for all insurance plans

这是表格的初始外观。现在,请注意 PRIVILEGE Insurnace计划具有与最后4个保险项目相关联的复选框,这意味着每个保险项目对于与该项目相关联的每个保险计划都是可选的。

  • 问题:如果我查看保险项目Juridic protection以了解保险计划PRIVILAGE A,请执行以下操作:

When i select a item from dropdown menu, every Insurance Plan which contains that Insurance Item will share the selected value

我知道我正在使用嵌套的ng-repeat,并且每个包含当前保险项checklist-model="selectedOptionalItems"的保险计划将被共享,换句话说,同一行内的所有元素都将填充相同的值。当我选择下拉菜单中的一个选项时,会发生同样的事情。这是一个问题的图片以及: {{0}}

任何形式的帮助将不胜感激,谢谢你提前!

0 个答案:

没有答案