How to get multi select data and add check box in each item of the list using Angular.js?
Question
I need to add check box in each item and get the multi selected value using Angular.js. My code is below.
<body ng-controller="speshController">
<h1>Hello</h1>
<div class="col-md-6">
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Child Business Name :</span>
<select class="form-control" multiple="multiple" id="restau" ng-model="restaurant" ng-options="qua.name for qua in listOfRestaurant track by qua.value" ng-change="getDayFromSpecial('restau');">
</select>
</div>
</div>
<button type="button" id="btn" ng-click="getValue();">GET</button>
</body>
Here I have one drop down list and I need to add check box before each item from drop down list. Suppose user selected multiple item while it will clicked on GET button I need to fetch those selected data. My controller side code is given below.
app.controller('speshController',function($scope,$http){
$scope.data=[{
'value':1,
'name':'aaa'
},{
'value':2,
'name':'bvc'
},{
'value':3,
'name':'rtcv'
},{
'value':4,
'name':'uytg'
}
]
$scope.listOfRestaurant=[];
angular.forEach($scope.data,function(obj){
var data={'name':obj.name,'value':obj.value};
$scope.listOfRestaurant.push(data);
})
$scope.getValue=function(){
}
})
I need to displayed those selected data in console. My full code is here .
2 answers
solution1
0 2016-11-01 07:39:24
ng-model on multi-select will give you the selected items as array
$scope.getValue=function(){
console.log($scope.restaurant)
}
solution2
0 2016-11-01 10:24:44
In my opinion, it is better to use checkbox with labels instead of multiselect dropdown.
<label ng-repeat="qua in listOfRestaurant track by qua.value">
<input type="checkbox" ng-model="qua.selected"/>
{{qua.name}}
</label>
You can test in 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.