我需要一個幫助。我有一個循環中有很多複選框，我需要使用Angular.js限制那些使用某些條件。讓我首先解釋我的代碼。 Here in plunkr我的代碼是present.I可以檢查那裏每一天有一個複選框，如果用戶點擊+按鈕複選框增加，在這裏我需要當用戶已經檢查最大2複選框從任何一天，其他將被禁用。只有2複選框可以從7 days.In整個表中檢查。我還需要點擊store按鈕後，兩個複選框的值與各自的行下拉數據應該獲取到控制器端函數。請檢查我的代碼here並幫助我。如何限制使用Angular.js/Javascript單擊的複選框
所以，另一個答案讓你走在正確的軌道上，這一個應該讓你一直在那裏。您基本上想要利用角色的ng-disabled屬性，並且當您給它的表達式評估爲true時，它所連接的表單字段將被禁用。
在你的HTML，你可以把任何形式的字段中輸入以下您希望禁用當你的條件得到滿足：
ng-disabled="isDisabled($parent.$index, $index)"
父指數將參考當前外環的一天，和index指內循環中的當前答案。
我用來實現這個解決方案的主控制器邏輯如下：
// initialize an array of selections
$scope.selectedAnswers = [];
// check if answer is selected...
// have to keep track of both the index of the answer and its parent day
$scope.answerIsSelected = function(dayIdx, answerIdx) {
var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
return $scope.selectedAnswers.indexOf(thisAnswer) > -1;
};
// depending on whether answer is already selected,
// adds it to or splices it from the selectedAnswers array
$scope.toggleAnswerSelected = function(dayIdx, answerIdx) {
var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
if ($scope.answerIsSelected(dayIdx, answerIdx)) {
$scope.selectedAnswers.splice($scope.selectedAnswers.indexOf(thisAnswer), 1);
} else {
$scope.selectedAnswers.push(thisAnswer);
}
};
// the check on each form element to see if should be disabled
// returns true if the answer is not an element in the selected array
// and if there are already two answers in the array
$scope.isDisabled = function(dayIdx, answerIdx) {
return !$scope.answerIsSelected(dayIdx, answerIdx) && $scope.selectedAnswers.length === 2;
};
最後，在該行的末尾，你想要的屬性上的複選框：
<input type="checkbox"
name="chk"
value="true"
ng-checked="answerIsSelected($parent.$index, $index)"
ng-click="toggleAnswerSelected($parent.$index, $index)"
ng-disabled="isDisabled($parent.$index, $index)">
全部下面的代碼片段...
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$q, $filter) {
$scope.submitted = false;
$scope.init = function() {
$scope.days = [];
$scope.listOfCategory = [{
id:1,
name: 'Category 1',
value: 1
}, {
id:2,
name: 'Category 2',
value: 2
},{
\t \t id:3,
\t \t name: 'Category 3',
value: 3
\t }];
$scope.listOfSubCategory=[];
//emulating ajax response: this should be removed, days reponse
var response = {
data: [{
day_name: "Monday"
}, {
day_name: "Tuesday"
}, {
day_name: "Wednesday"
}, {
day_name: "Thursday"
}, {
day_name: "Friday"
}, {
day_name: "Saturday",
}, {
day_name: "Sunday"
}]
};
//end response
//success
angular.forEach(response.data, function(obj) {
obj.answers = [];
$scope.addNewRow(obj.answers);
$scope.days.push(obj);
});
};
$scope.renderWithMode = function(index,catvalue,parent,isEditMode){
if(isEditMode){
$scope.removeBorder(index,catvalue,parent);
}
};
$scope.removeBorder = function(index,catvalue,parent){
//make $http call here
//below code should be removed, its emulated response
var subcategories = [{
id:1,
name: 'SubCategory 1',
value: 1
}, {
id:2,
name: 'SubCategory 2',
value: 2
}, {
id:3,
name: 'SubCategory 3',
value: 3
}, {
id:4,
name: 'SubCategory 4',
value: 4
}];
//after reponse from server as subcaegory
if(!$scope.listOfSubCategory[parent]){
$scope.listOfSubCategory[parent] = [];
}
\t //console.log('value',catvalue);
\t var subcategories1=[];
// $scope.listOfSubCategory[parent][index] = angular.copy(subcategories);
var result = $filter('filter')(subcategories, {id:catvalue})[0];
// console.log('result',result);
subcategories1.push(result)
$scope.listOfSubCategory[parent][index] = subcategories1;
};
$scope.addNewRow = function(answers) {
answers.push({
category: null,
subcategory: null,
comment: null
});
};
$scope.submitAnswers = function(){
// console.log($scope.selectedAnswers);
$scope.submitted = true;
$scope.sendToServer = $scope.selectedAnswers;
};
$scope.getResponse = function(){
//emulating reponse: this should come from server,
var response = {
data: [{
day_name: "Monday",
answers:[{
category:2,
subcategory:1,
comment:'This is answer 1'
},{
category:1,
subcategory:2,
comment:'This is answer 2'
}]
}, {
day_name: "Tuesday",
answers:[{
category:1,
subcategory:2,
comment:'This is answer 1'
}]
}, {
day_name: "Wednesday"
}, {
day_name: "Thursday"
}, {
day_name: "Friday"
}, {
day_name: "Saturday",
}, {
day_name: "Sunday"
}]
};
$scope.days = [];
angular.forEach(response.data, function(obj) {
if(!obj.answers){
obj.answers = [{
category:null,
subcategory:null,
comment:null
}];
}
$scope.days.push(obj);
});
$scope.isEditMode = true;
};
$scope.selectedAnswers = [];
$scope.answerIsSelected = function(dayIdx, answerIdx) {
var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
return $scope.selectedAnswers.indexOf(thisAnswer) > -1;
};
$scope.toggleAnswerSelected = function(dayIdx, answerIdx) {
var thisAnswer = $scope.days[dayIdx].answers[answerIdx];
if ($scope.answerIsSelected(dayIdx, answerIdx)) {
$scope.selectedAnswers.splice($scope.selectedAnswers.indexOf(thisAnswer), 1);
} else {
$scope.selectedAnswers.push(thisAnswer);
}
};
$scope.isDisabled = function(dayIdx, answerIdx) {
return !$scope.answerIsSelected(dayIdx, answerIdx) && $scope.selectedAnswers.length === 2;
};
$scope.removeRow = function(answers,index,parent){
\t answers.splice(index, 1);
\t $scope.listOfSubCategory[parent].splice(index,1);
// answers.splice(answers.length-1,1);
};
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script src="script.js"></script>
<body ng-controller="MainCtrl">
Plunker
<table ng-init="init()" class="table table-bordered table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Day</th>
<th>Category</th>
<th>Sub Subcategory</th>
<th>Comments Or special promotion</th>
<th>Add More</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="d in days track by $index">
<td>{{d.day_name}}</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers track by $index">
<td>
<select class="form-control"
id="answer_{{$index}}_category"
name="answer_{{$index}}_category"
ng-model="answer.category"
ng-options="cat.name for cat in listOfCategory track by cat.value"
ng-init="renderWithMode($index,answer.category.value,$parent.$index,isEditMode)"
ng-change="removeBorder($index,answer.category.value,$parent.$index)">
<option value="">Select Category</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers track by $index">
<td>
<select class="form-control"
id="answer_{{$index}}_subcategory"
name="answer_{{$index}}_subcategory"
ng-model="answer.subcategory"
ng-options="sub.name for sub in listOfSubCategory[$parent.$index][$index]">
<option value="">Select Subcategory</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers">
<td>
<input type="text"
id="answer_{{$index}}_comment"
name="answer_{{$index}}_comment"
placeholder="Add Comment"
ng-model="answer.comment" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr ng-repeat="answer in d.answers track by $index">
<td style="width:20px">
<input ng-show="d.answers.length>1"
class="btn btn-red"
type="button"
name="minus"
id="minus"
value="-"
style="width:20px; text-align:center;"
ng-click="removeRow(d.answers, $index,$parent.$index)" />
</td>
<td ng-show="$last">
<input type="button"
class="btn btn-success"
name="plus"
id="plus"
value="+"
style="width:20px; text-align:center;"
ng-click="addNewRow(d.answers)" />
</td>
<td>
<input type="checkbox"
name="chk"
value="true"
ng-checked="answerIsSelected($parent.$index, $index)"
ng-click="toggleAnswerSelected($parent.$index, $index)"
ng-disabled="isDisabled($parent.$index, $index)" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<input type="submit"
ng-click="submitAnswers()"
value="Store">
<pre ng-if="submitted"> {{ sendToServer | json }} </pre>
<!-- <input type="button" value="Edit" ng-click="getResponse()">-->
</body>
</html>
將每個複選框的值綁定到模型（使用'ng-model'指令）並使用'$ scope。$ watch'函數來監視所選複選框的數量，並根據該數量啓用或禁用期望的元素。 –
你可以在那裏編輯你的答案。在plunkr。 – satya