Hi I am developing web application in angularjs. I have one form. I am binding values to multi select dropdown.
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
I am binding array to locations. My array look likes
0: id: 1 Location:"ABC"
1: id: 2 Location:"DEF"
2: id: 3 Location:"IJK"
Now my requirement is to make checked some values. Suppose if i have var locations="ABC,DEF" then i want to make only those values checked. May i know if this can be done. Any help would be appreciated. Thank you.
Hi I am developing web application in angularjs. I have one form. I am binding values to multi select dropdown.
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
I am binding array to locations. My array look likes
0: id: 1 Location:"ABC"
1: id: 2 Location:"DEF"
2: id: 3 Location:"IJK"
Now my requirement is to make checked some values. Suppose if i have var locations="ABC,DEF" then i want to make only those values checked. May i know if this can be done. Any help would be appreciated. Thank you.
- Try adding "checked=true" attribute to the required input elements (i.e. ABC and DEF in ur case) through Javascript/jquery. – Ajay B L Commented Aug 22, 2017 at 10:50
- Check this link it will help you. stackoverflow./questions/21352034/… – Narendra Solanki Commented Aug 22, 2017 at 10:51
- Possible duplicate of AngularJS ng-repeat setting default select value – Ajay B L Commented Aug 22, 2017 at 10:53
- Thanks Ajay. I understood i have to put checked=true but how can i make only ABC or DEF checked. How to do it in controller? – Niranjan Godbole Commented Aug 22, 2017 at 10:53
- Have another property in your array of data type Boolean and send it with true/false value. Populate the Boolean property in checked attribute. – Deepesh kumar Gupta Commented Aug 22, 2017 at 10:53
7 Answers
Reset to default 4Basically, if our input is a string with the locations that should be selected (i.e) var locations = 'ABC,DEF'; we can split this string by the , character and get an array with the locations to match:
var app = angular.module('myApp', []);
app.controller("locationsController", ["$scope",
function ($scope) {
// vars
var locations = 'ABC,DEF';
// functions
function init () {
var locals = locations.split(',');
angular.forEach($scope.locations, function (item) {
if (locations.indexOf(item.Location) > -1) {
item.checked = true;
}
});
}
// $scope
$scope.locations = [
{ id: 1, Location: "ABC" },
{ id: 1, Location: "DEF" },
{ id: 1, Location: "IJK" }
];
// init
init();
}
]);<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="locationsController">
<li ng-repeat="p in locations">
<input ng-checked="p.checked" type="checkbox" ng-model="p.checked" required/>
<span>{{ p.Location }}</span>
</li>
</div>
</div>Try this. Define for each checkbox separate model.
var app = angular.module('myApp', []);
app.controller("Controller", ["$scope",
function($scope) {
$scope.locations = [{
"id": 1,
Location: "ABC"
}, {
"id": 1,
Location: "DEF"
}, {
"id": 1,
Location: "IJK"
}]
var checked = ['ABC','DEF'];
function init() {
angular.forEach($scope.locations,function(location){
if(checked.indexOf(location.Location) != -1){
location.checked = true;
}
})
}
init();
}
]);<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
<li ng-repeat="p in locations">
<input type="checkbox" ng-model="p.checked" name="location" required/>
<span>{{p.Location}}</span>
</li>
</div>
</div>It should work:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$filter) {
$scope.selectedValue = 'ABC,IJK';
$scope.selectedValue = $scope.selectedValue.split(',');
$scope.options = [{
id: 0,
name: 'ABC'
}, {
id: 1,
name: 'DEF'
}, {
id: 2,
name: 'IJK'
}];
$scope.selected = [];
angular.forEach($scope.selectedValue,function(val,key){
var r = $filter('filter')( $scope.options, {name: val})[0].id;
if(r != undefined){
$scope.selected[r]=true;
}else{
$scope.selected[r]=false;
}
});
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis./ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<li ng-repeat="p in options">
<input type="checkbox" ng-model="selected[p.id]" ng-change="getIndex(p.Location,isTrue )" />
<span>{{p.name}}</span>
</li>
Selected : {{selected}}
</div>Try this:
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="p.Location == 'ABC' || p.Location == 'DEF'? true : false" ng-model="p.master" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
Add one more field checked:"true" with your locations like this
var app = angular.module('myApp', []);
app.controller("Controller", ["$scope",
function($scope) {
$scope.locations = [{id:1,Location:"ABC",checked:"false"},{id:1,Location:"DEF",checked:"true"},{id:1,Location:"IJK",checked:"true"}]
}
]);<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
<li ng-repeat="p in locations">
<input ng-checked="{{p.checked}}" type="checkbox" ng-model="p.id" name="location" required/>
<span>{{p.Location}}</span>
</li>
</div>
</div>Try this, Since you need different ngModel for each check box, you need to put them inside the location object itself.
HTML:
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="master" ng-model="p.isTrue" ng-change="getIndex(p.Location, p.isTrue)" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
In Javascript:
$scope.locations = [
{id: 1 Location:"ABC"},
{id: 2 Location:"DEF"},
{id: 3 Location:"GHI"}
];
var selectedLocations="ABC,DEF";
selectedLocations = locations.split(",");
angular.forEach($scope.locations, function(loc){
loc.isTrue = selectedLocations.indexOf(loc.Location) > -1;
});
Add another variable to your array. and set the value true/false in it
0: id: 1 Location:"ABC" flag : true
1: id: 2 Location:"DEF" flag : false
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="p.flag" ng-model="isTrue" ng-
change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
Use that flag to check unchek ur checkbox/