У меня есть список флажков, отображаемых с помощью ng-repeat, теперь мне нужно отключить флажок флажка на основе определенного значения.
checkbox display code
<div class="checkbox">
<label ng-repeat="specific in specifications">
<input ng-click="onClick(specific, newObject[specific])" id="specifications_chk" value="{{specific}}" ng-model="newObject[specific]" type="checkbox">
{{specific}}
</label>
</div>
Здесь я использую функцию ng-click для отключения флажка.
This is my controller code:
$scope.onClick = function(sp, checked){
if(sp == 'Sofa_Cleaning' && checked === true){
angular.element(document.getElementById('specifications_chk'))[0].disabled = true;
}
if(sp == 'Sofa_Cleaning' && checked === false){
angular.element(document.getElementById('specifications_chk'))[0].disabled = false;
}
};
html view:
в коде контроллера может отключить только первое значение (IndepthHomeCleaning)
, так как я могу отключить Room_Cleaning, Kitchen_Cleaning,
и Carpet_cleaning
когда Sofa_Cleaning
будет checked
Я застрял в этом, помощь будет действительно оценена
Если вы хотите изменить specifications
массив, вам нужен новый массив и сопоставление. Определите новый объект строки для каждой спецификации. Строка спецификации доступа и ее поддержка (активна или отключена) из вашей спецификации.
http://jsfiddle.net/ms403Ly8/87/
function testCtrl($scope, $filter) {
$scope.specifications = ["IndepthHomeCleaning", "Room_Cleaning", "Kitchen_Cleaning", "Carpet_cleaning", "Sofa_Cleaning"];
$scope.specificationRows = [];
$scope.newRow = function(spec) {
var newSpec = {
SpecName: spec,
IsDisabled: false,
IsClicked: false
};
$scope.specificationRows.push(newSpec);
};
$scope.getRowObject = function(sp) {
return $filter('filter')($scope.specificationRows, {
SpecName: sp
})[0];
};
$scope.getRowStatus = function(spec) {
console.log($filter('filter')($scope.specificationRows, {
SpecName: spec
})[0].IsDisabled);
return $scope.getRowObject(spec).IsDisabled;
};
$scope.onClick = function(sp) {
$scope.getRowObject(sp).IsClicked = !$scope.getRowObject(sp).IsClicked;
if (sp == 'Sofa_Cleaning') {
$scope.getRowObject("Carpet_cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
$scope.getRowObject("Kitchen_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
$scope.getRowObject("Room_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
}
};
}
Пример getRowObject. Может быть, это не лучшая практика. Вы можете изменить эту функцию.
Я не знаю, почему вы все еще придерживаетесь jquery. Вы получаете идентификатор, когда вы пытаетесь отключить этот флажок.
,
В html идентификатор должен быть уникальным для текущей html-страницы. y ou имеют дублированные идентификаторы, и вы получаете первое значение из массива, используя [o], когда вы пытаетесь отключить.
,
Если вы строго хотите решение из того же метода, используйте следующую методологию. Используйте имя класса вместо id для флажков и используйте угловой элемент и отключите его.
Следующий код следует использовать там, где вам нужно отключить. Используйте соответствующий код на основе ваших потребностей.
angular.forEach(document.getElementsByClassName('checkbox1'), function(value, key) {
angular.element(value)[0].disabled = true;
debugger
});
Думаю, ты слишком усложняешь это. Ваш объект данных должен быть упрощен, чтобы выглядеть так
$scope.specifications = [
{name: 'Sofa_Cleaning', active: false},
{name: 'Carpet_Cleaning', active: false},
{name: 'Room_Cleaning', active: false},
{name: 'Kitchen_Cleaning', active: false},
{name: 'BathroomCleaning', active: false}
];
Шаблон:
<input type="checkbox"
ng-bind="specific.name"
ng-model="specific.active"
ng-disabled="shouldDisable(specific)">
в вашем контроллере
$scope.disableWhenSofaIsChecked = ['Room_Cleaning','Kitchen_Cleaning','Carpet_Cleaning'];
$scope.shouldDisable = function(specific) {
var disable = $scope.disableWhenSofaIsChecked;
if(disable.indexOf(specific.name) > -1) {
for(var obj in $scope.specifications) {
if(obj.name === 'Sofa_Cleaning') {
return obj.active;
}
}
}
return false;
}
РЕДАКТИРОВАТЬ
Поэтому, если вы получаете данные спецификаций из API, вы можете просто сделать это:
SomeApi
.get()
.then(function(results){
// Assuming it a promise. End result is the same for a passed-in callback
// Assuming results is an array of names
$scope.specifications = results.map(function(item){
return {
name: item,
active: false
};
});
});
У вас не должно быть одинакового идентификатора для нескольких элементов в коде. Вам нужно сделать уникальные идентификаторы элементов.
HTML:
<div ng-app ng-controller="LoginController">
<div class="checkbox">
<label ng-repeat="specific in specifications">
<input id="specifications_chk{{$index}}" ng-click="onClick(specific, newObject[specific])" value="{{specific}}" ng-model="newObject[specific]" type="checkbox" /> {{specific}}
<br>
</label>
</div>
</div>
JavaScript:
function LoginController($scope) {
$scope.specifications = ['IndepthHomeCleaning',
'Room_Cleaning',
'Kitchen_Cleaning',
'BathroomCleaning',
'Carpet_cleaning',
'Sofa_Cleaning'
];
$scope.newObject = {
'IndepthHomeCleaning': 1,
'Room_Cleaning': 2,
'Kitchen_Cleaning': 3,
'BathroomCleaning': 4,
'Carpet_cleaning': 5,
'Sofa_Cleaning': 6
};
$scope.onClick = function(sp, checked) {
if (sp == 'Sofa_Cleaning' && checked === true) {
angular.element(document.getElementById('specifications_chk1'))[0].disabled = true;
angular.element(document.getElementById('specifications_chk2'))[0].disabled = true;
angular.element(document.getElementById('specifications_chk4'))[0].disabled = true;
}
if (sp == 'Sofa_Cleaning' && checked === false) {
angular.element(document.getElementById('specifications_chk1'))[0].disabled = false;
angular.element(document.getElementById('specifications_chk2'))[0].disabled = false;
angular.element(document.getElementById('specifications_chk3'))[0].disabled = false;
}
};
}
JsFiddle: https://jsfiddle.net/nikdtu/f7k3kcwn/
Вы используете атрибут id, который должен быть уникальным для каждого элемента DOM. Таким образом, ваше решение будет принимать один элемент. Поэтому вы должны попробовать использовать атрибут класса и функцию document.getElementbyClass.
использовать ng-disabled
var angApp = angular.module('myApp', []);
angApp.controller('MyController', function MyController($scope) {
$scope.specifications = [{"text":"IndepthHomeCleaning ", "disabled":false, "checked":false},
{"text":"Room_Cleaning", "disabled":false, "checked":false},
{"text":"Kitchen_Cleaning", "disabled":false, "checked":false},
{"text":"BathroomCleaning", "disabled":false, "checked":false},
{"text":"Carpet_cleaning", "disabled":false, "checked":false},
{"text":"Sofa_Cleaning", "disabled":false, "checked":false}];
$scope.onClick = function(sp, checked){
console.log(sp, checked);
if(sp.text == 'Sofa_Cleaning' && checked){
$scope.specifications[1].disabled = true;
$scope.specifications[2].disabled = true;
$scope.specifications[4].disabled = true;
}
if(sp.text == 'Sofa_Cleaning' && !checked){
$scope.specifications[1].disabled = false;
$scope.specifications[2].disabled = false;
$scope.specifications[4].disabled = false;
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<div class="checkbox">
<label ng-repeat="specific in specifications" style="display:block">
<input ng-disabled="specific.disabled" ng-change="onClick(specific, specific.checked)" id="specifications_chk" value="specific.checked}" ng-model="specific.checked" type="checkbox">
{{specific.text}}
</label>
</div>
</div>
Не используйте jquery для манипуляции с dom.
Используйте ng-change вместо ng-click. Это будет подходящим.
Здесь я обновляю plunkr.
Здесь для простого примера, я сделал, как если значение check5 затем отключить все флажки. В противном случае установите флажки.
https://jsfiddle.net/AvGKj/517/
Примечание. Я использовал маленький старый плагин. Пожалуйста, возьмите только логики
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="appObj in myAppObjects">
<td>
<input type="checkbox" ng-model="appObj.cb1"
ng-disabled="appObj.disable"
ng-change="Disable(appObj,myAppObjects)">
{{appObj.value}}
</td>
</tr>
</table>
{{myAppObjects}}
<br>list of checked items: {{checkedItems()}}
</div>
function MyCtrl($scope) {
$scope.myAppObjects = [
{id:1,value:'check1'},
{id:2,value:'check2'},
{id:3,value:'check3'},
{id:4,value:'check4'},
{id:5,value:'check5'}
];
$scope.Disable=function(appObj,list)
{
if(appObj.value=="check5")
{
for(var i=0; i<list.length;i++)
{
if(list[i].value!="check5")
{
if(appObj.cb1==true)
{
list[i].disable=true;
}
else{
list[i].disable=false;
}
}
}
}
}
}
ng-disabled
?