AngularJs - 根据顶行选择禁用表格输入答案

【问题标题】：AngularJs - Disable input on table dependent upon top row selectionAngularJs - 根据顶行选择禁用表格输入
【发布时间】：2017-06-19 02:50:34
【问题描述】：

如果顶行的“Active”或“Engaged”布尔值设置为 true，我正在尝试从顶（主）行下方禁用表格输入元素。我不希望他们在将其设置为 true 时将数据丢失在第一行下方，而只是禁用它。如果用户在第一行将“活动”&&“已参与”设置为 false，那么我希望他们能够再次编辑第一行下方的数据。有没有一种简单的方法可以用 AngularJs 做到这一点？

这里是一个例子：https://jsfiddle.net/7kg6kuzm/2/

<body ng-app="test" ng-controller="AppCtrl">
<p>{{test}}</p>
<table class="table table-bordered">
    <thead>
        <tr>
            <th class="border-less"></th>
            <th>People</th>
            <th>Active</th>
            <th>Engaged</th>
            <th>Town</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="(month, info) in months">
            <td><p>{{month}}</p></td>
            <td><input type="text" ng-model="info.people"/></td>
            <td><input type="checkbox" ng-model="info.active"/></td>
            <td><input type="checkbox" ng-model="info.engaged"/></td>
            <td><input type="text" ng-model="info.form" /></td>
        </tr>
    </tbody>

可能的 json 对象值（在这种情况下，由于“全部”或顶行的布尔值之一设置为 true，其余行将被禁用）：

var months = {
  "all": {"people":25,"active":true,"engaged":false,"form":"test0"},
  "jan": {"people":63,"active":false,"engaged":true,"form":"test2"},
  "feb": {"people":46,"active":true,"engaged":false,"form":"test3"},
  "mar": {"people":65,"active":false,"engaged":false,"form":"test4"},
  "apr": {"people":66,"active":true,"engaged":true,"form":"test5"},
  "may": {"people":67,"active":false,"engaged":true,"form":"test6"}
}

【问题讨论】：

标签： angularjs html-table

【解决方案1】：

我想通了，供将来参考，或者如果其他人需要知道如何做到这一点：

https://jsfiddle.net/7kg6kuzm/3/

我最终检查了每个输入行并检查了第一行的值：

<td><input ng-disabled="(months['all'].active || months['all'].engaged) && this.month!=='all'" type="text" ng-model="info.people"/></td>

【讨论】：