I am trying to display a checkbox inside Cards. So whenever the checkbox is checked the value is going to bind. It is working fine. But I need to do this for many cards. Instead of repeating the same code, I need to know the better way to achieve it. I saw many of the solutions related to this but no use.
Controller code
$scope.carBrand = {
"carbrands" : {
"BMW" : [
{
"d320" : $scope.bmwPermission.d320,
"note" : "Users who likes d320 ",
"configurable" : true
},
{
"d520" : $scope.bmwPermission.d520,
"note" : "Users who likes d520",
"configurable" : true
},
{
"d720" :$scope.bmwPermission.d720,
"note" : "Users who likes d720",
"configurable" : true
}
],
"AUDI" : [
{
"A1" : $scope.audiPermission.A1,
"note" : "Users who likes A1",
"configurable" : true
},
{
"A2" : $scope.audiPermission.A2,
"note" : "Users who likes A2",
"configurable" : true
},
{
"A3" : $scope.audiPermission.A3,
"note" : "Users who likes A3",
"configurable" : true
}
]
}
}
$scope.bmwDependencyCheck = function(newObj) {
if( $scope.bmwPermission.d320){
$scope.bmwPermission.d520 = true
$scope.bmwPermission.d720 = true
}else if ($scope.bmwPermission.d520){
$scope.bmwPermission.d720 = true
}
}
...
HTML CODE
<pre>
<div class="card inline col-md-3">
<div class="card-heading">
<div class="content-block lead inline col-md-12" >
<label class="col-md-8 text-align-left"> BMW </label>
</div>
</div>
<div class="card-body">
<ul class="flexview lbl-content">
<li class="lable col-md-10">
<label class="checkbox-inline" for="bmw-d320">
<input type="checkbox" name="chpview" id="bmw-d320"
ng-model="bmwPermission.d320"
ng-change="bmwDependencyCheck(bmwPermission.d320)" />d320
</label>
</li>
</ul>
<ul class="flexview lbl-content">
<li class="lable col-md-10">
<label class="checkbox-inline" for="bmw-d520">
<input type="checkbox" name="chpview" id="bmw-d520"
ng-model="bmwPermission.d520"
ng-change="bmwDependencyCheck(bmwPermission.d520)" />d520
</label>
</li>
</ul>
.
.
.
</div>
</div>
</pre>
I am not sure whether you meant this working model. As said @Santhosh_mp you need to use two ng-repeat.
Note, the value binding will be on unique keys...
in your case you need to create a model key for each and every row and check whether it exists, so the key reference is same on all loop
{
"d320" : $scope.bmwPermission.d320,
"model": "d320"
"note" : "Users who likes d320 ",
"configurable" : true
},
<input ng-if="row.model === 'd320'" type="checkbox" ng-model="row.d320">
This method requires multiple checkboxes with ng-if.....and cannot work dynamic.. Say for example adding d321 will need to be coded again.
So instead i changed the key to value instead of d320
I am not sure, why the ng-model for the second ng-repeat did not bind bind... So i made a seperate function and called it at initialize and on every model change
<div ng-controller="CarsController">
<ul class="flexview lbl-content">
<li class="lable col-md-10">
<label class="checkbox-inline" for="bmw-d320">
<input type="checkbox" name="chpview" id="bmw-d320"
ng-model="bmwPermission.d320"
ng-change="bmwDependencyCheck(bmwPermission.d320)" />d320
</label>
</li>
</ul>
<ul class="flexview lbl-content">
<li class="lable col-md-10">
<label class="checkbox-inline" for="bmw-d520">
<input type="checkbox" name="chpview" id="bmw-d520"
ng-model="bmwPermission.d520"
ng-change="bmwDependencyCheck(bmwPermission.d520)" />d520
</label>
</li>
</ul>
<ul>
<li ng-repeat="(key, values) in carBrand.carbrands">{{key}}
<ul>
<li ng-repeat="row in values">
<input type="checkbox" ng-model="row.value">
{{row.note}}
{{row.configurable}}
</li>
</ul>
</li>
</ul>
</div>
JS
var app = angular.module('stackoverflow', []);
app.controller('CarsController', function($scope, $timeout){
$scope.bmwPermission={};
$scope.audiPermission={};
$scope.bmwPermission.d320 = false;
$scope.bmwPermission.d520 = false;
$scope.bmwPermission.d720 = false;
$scope.audiPermission.A1 = false;
$scope.audiPermission.A2 = false;
$scope.audiPermission.A3 = false;
$scope.defineCars = function(){
$scope.carBrand = {
"carbrands" : {
"BMW" : [
{
"value" : $scope.bmwPermission.d320,
"note" : "Users who likes d320 ",
"configurable" : true
},
{
"value" : $scope.bmwPermission.d520,
"note" : "Users who likes d520",
"configurable" : true
},
{
"value" :$scope.bmwPermission.d720,
"note" : "Users who likes d720",
"configurable" : true
}
],
"AUDI" : [
{
"value" : $scope.audiPermission.A1,
"note" : "Users who likes A1",
"configurable" : true
},
{
"value" : $scope.audiPermission.A2,
"note" : "Users who likes A2",
"configurable" : true
},
{
"value" : $scope.audiPermission.A3,
"note" : "Users who likes A3",
"configurable" : true
}
]
}
}
}
$scope.bmwDependencyCheck = function(newObj) {
if( $scope.bmwPermission.d320){
$scope.bmwPermission.d520 = true
$scope.bmwPermission.d720 = true
}else if ($scope.bmwPermission.d520){
$scope.bmwPermission.d720 = true
}
$scope.defineCars();
}
$scope.defineCars();
});
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.