I have a question about how to uncheck check-boxes inside ng-repeat, when the ng-model is already in use?
This is the construction:
The object:
$scope.wines = [
{ "name": "Wine a", "type": "white", "country": "italie", "style": "medium" },
{ "name": "Wine a", "type": "white", "country": "france", "style": "light" },
{ "name": "Wine a", "type": "white", "country": "france", "style": "sweet" }
];
$scope.winetypes = {white : true, red: true};
$scope.whitetypes = {light : false,medium : false,sweet : false};
});
HTML
<li ng-repeat="(type, value) in winetypes">
<input type="checkbox" ng-model="winetypes[type]" /> {{type}}
</li>
<li ng-repeat="(style, value) in whitetypes">
<input type="checkbox" ng-model="whitetypes[style]" /> {{style}}
</li>
<ul>
<li ng-repeat="wine in wines | winetypefilter:winetypes |whitefilter:whitetypes">
{{wine.name}} is a {{wine.type}} with {{wine.style}} style from {{wine.country}}
</li>
</ul>
I tried without success:
$scope.white= function() {
if($scope.winetypes.white = false) {
return $scope.whitetypes = {light: false, medium: false, sweet: false}
};
$scope.white;
The demo: http://plnkr.co/edit/nIQ2lkiJJY9MwJKHrqOk?p=preview
What you could do is use ng-click
and $timeout
to handle every click to the white checkbox.
$scope.click_handler = function (type) {
if (type == 'white') {
$timeout(function () {
if ($scope.winetypes[type] === false) {
$scope.wines.forEach(function (e) {
if (e.type == 'white') {
$scope.whitetypes[e.style] = false;
}
})
}
})
}
};
The $timeout
is necessary since we want to wait for ng-model to update first. Make sure you are injecting $timeout
into the controller.
in markup
<input type="checkbox" ng-click="click_handler(type)" ng-model="winetypes[type]" /> {{type}}
Here is a working Plunker
first decide what action you want...
so first solutions that come to my minds are...
ng-change
(because your wish is about changing a checkbox attribute) ng-click
(for changing checkbox attribute you should click that input) ng-checked
(set condition to be checked or unchecked) ok let's move on our solution... After analysing these three (there can be more solutions) ng-change
is best for this scenario because it guarantees that binded fucntion will be execute after user changed value of checkbox... for more details check official docs
first edit your html...
<li ng-repeat="(type, value) in winetypes">
<input type="checkbox" ng-model="winetypes[type]" ng-change="disableRelatedStyles(type, winetypes[type])"/> {{type}}
</li>
and add our new function (disableRelatedStyles) to our controller...
$scope.disableRelatedStyles = function (type, value) {
if (type == 'white' && !value) {
for(var style in $scope.whitetypes) {
$scope.whitetypes[style] = false;
}
}
};
and finally a working PLUNKER ...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.