내가 할 수있는 한 많은 질문을 확인하고 몇 가지 답변을 찾았지만 마지막 스트레칭에 붙어 있습니다. 내가 찾은 대부분은 체크 박스를 사용하여 모든 것을 끄는 방법이 아니라 점검 된 것을 제외하고 모든 것을 끄는 방법을 다루는 방법을 다룹니다.angularjs dom 조작 테이블에서
각 행에 2-3 개의 체크 박스가있는 표가 있습니다. 목표는 1) 한 상자를 선택하면 다른 모든 행의 확인란이 비활성화됩니다 (유일한 옵션은 같은 행의 확인란입니다). 2) 세 번째 확인란이있는 경우 동일한 행의 두 번째 상자를 선택하면 2) , 또한 비활성화되어 있으며, 마지막으로 3) 두 번째 상자가 제출 버튼을 활성화하는지 확인합니다. 나는 # 1을 작동하도록 만들었지 만 (비록 내가 몇 가지 규칙을 위반했다고 생각하기는하지만), # 3 작업을하게되었습니다. (글쎄요, 정확히 하나의 상자를 체크했을 때 가능합니다. 맞지만 어쩌면 충분히 가깝습니다). 나에게 두통을 안겨주는 3 버튼 행의 세 번째 버튼을 사용 중지하는 것입니다.
저는 VBAhole의 데모를 How to respond to clicks on a checkbox in an AngularJS directive?에서 사용했습니다. HTML Here's the working plnkr.
: 여기
<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;
}
};
});
그것은 마지막 비트에 정말 스파게티 같은 도착합니다 (두 번째 if 문), 현재 반환되는 전류가 실제로 어떻게 변경되는지는 알 수 없지만 제거하면 비활성화 기능이 작동하지 않습니다. 문제는 (두 개 중 하나가) 두 개의 상자가 체크 된 경우 &을 선택 취소하면 모든 행의 모든 상자를 다시 사용할 수있게합니다.
(jquery에서는 쉽게이 작업을 수행 할 수 있지만, 지침은 스트림을 섞어서는 안된다는 것입니다. 순수한 각도입니다.) 이제 며칠 동안 내 머리를 두드리는 소리가 들렸습니다. 어떤 깨달음이라도 대단히 감사하겠습니다. 티아!