できるだけ多くの質問をチェックし、いくつかの答えを見つけましたが、最後の段階で行き詰まっています。私が見つけたもののほとんどは、チェックされたもの以外をすべてオフにする方法ではなく、チェックボックスで物事をオンにする方法をカバーしています。
各行に 2 ～ 3 個のチェックボックスがあるテーブルがあります。目的は、1) 1 つのボックスをチェックすると、他のすべての行のチェックボックスが無効になります (唯一のオプションは同じ行のチェックボックスです)、次に 2) 同じ行の 2 番目のボックスをチェックすると、3 番目のチェックボックスがある場合です。 、それも無効になり、最後に 3) 2 番目のボックスをオンにすると、送信ボタンが有効になります。私は #1 が機能するようになりました (ただし、いくつかのルールを破ったと思います)。正しいが、おそらく十分に近い）。頭が痛いのは、3 つ並んだボタンの 3 番目のボタンを無効にすることです。
AngularJSディレクティブのチェックボックスのクリックに応答する方法からVBAholeのデモを使用しましたか? それは私にいくらかの方法をもたらしました。これが作業中のplnkrです。
html:
<tr ng-repeat="e in entities" ng-class="{active : isChecked(e.id) }" id="row{{e.id}}">
<td>
<label>
<input type="checkbox" name="checkbox{{e.id}}" ng-disabled="checkThis(e.id, e.box1id)" ng-checked="isChecked(e.box1id)" ng-click="updateCheck($event, e.id)" />
{{e.box1}}
</label><br />
<label>
<input type="checkbox" name="checkbox{{e.id}}" ng-disabled="checkThis(e.id, e.box2id)" ng-checked="isChecked(e.box2id)" ng-click="updateCheck($event, e.id)" />
{{e.box2}}
</label><br />
<label>
<input type="checkbox" name="checkbox{{e.id}}" ng-disabled="checkThis(e.id, e.box3id)" ng-checked="isChecked(e.box3id)" ng-click="updateCheck($event, e.id)" />
{{e.box3}}
</label>
</td>
<td>
<button disabled ng-disabled="!isChecked(e.id)">submit</button>
</td>
</tr>
そして、これがコントローラーです（まだディレクティブに分割していません）：
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.entities = [
{ id: 10, name: "boxrow10", box1: "red11", box1id: 11, box2: "blue12", box2id: 12, box3: "blue13", box3id: 13 },
{ id: 20, name: "boxrow20", box1: "red21", box1id: 21, box2: "blue22", box2id: 22, box3: "blue23", box3id: 23 },
{ id: 30, name: "boxrow30", box1: "red31", box1id: 31, box2: "blue32", box2id: 32, box3: "blue33", box3id: 33 }
];
$scope.checked = [];
var updateChecked = function (action, id) {
if (action == 'add') $scope.checked.push(id);
if (action == 'remove') $scope.checked.splice($scope.checked.indexOf(id), 1);
}
$scope.updateCheck = function ($event, id) {
var checkbox = $event.target;
var action = (checkbox.checked ? 'add' : 'remove');
updateChecked(action, id);
};
$scope.isChecked = function (id) {
return $scope.checked.indexOf(id) >= 0;
};
$scope.checkThis = function (id, boxid) {
var check = $scope.checked;
var current = id;
if (check != current && check.length == 1) {
return current;
} else if (check.length == 2) {
for (var i = check.length - 2; i >= 0; i--) {
if (check[i] === current) {
check.splice(i, 1);
}
}
return current;
}
};
});
最後のビット (2 番目の if ステートメント) で本当にスパゲッティのようになり、電流を返すと実際に何かがどのように変化するかわかりませんが、それを削除すると、無効化機能が得られません。問題は (特に) 2 つのボックスをオンにして 1 つのチェックを外すと、すべての行のすべてのボックスが無効のままになるのではなく、再び有効になることです (ボックスがまだチェックされているため)。
（jqueryで簡単にできることは知っていますが、私の指示ではストリームを混合しないようになっているため、純粋な角度です。）私はこれに数日間頭を悩ませてきました。どんな啓発も大歓迎です。ティア！