I have a list box containing a list of objects.I have a list of checkboxes corresponding to the elements of the list.On the click of a checkbox,the corresponding value in the list should get selected automatically without manual selection of the list.This should happen for all the checkboxes.I am implementing this functionality through angularjs.
this is the code I have written so far.I am able to implement the selection but the code is getting into a loop and executing the selection multiple times.
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS Listbox with Checkbox2</title>
<script src="http://ift.tt/1ogzsZW"></script>
<link type="text/css" rel="stylesheet" href="styles.css"></link>
<script>
var app = angular.module('myapp', []);
app.controller('controller', function($scope) {
$scope.months = [{name: 'January', selected: false},
{name: 'February', selected: false},
{name: 'March', selected: false},
{name: 'April', selected: false},
{name: 'May', selected: false},
{name: 'June', selected: false},
{name: 'July', selected: false},
{name: 'August', selected: false},
{name: 'September', selected: false},
{name:'October', selected: false},
{name: 'November', selected: false},
{name: 'December', selected: false}];
$scope.selection=[];
// toggle selection for a given employee by name
$scope.toggleSelection = function toggleSelection(name) {
//alert('toggleSelection called');
var idx = $scope.selection.indexOf(name);
//alert('1.' + name);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(name);
}
$scope.isSelected = function isSelected(monthName, selected)
{
//alert('isSelected called');
if(monthName == name)
{
//alert('2.'+monthName);
selected = true;
return selected;
}
return selected;
}
};
});
</script>
</head>
<body ng-app="myapp">
<div class="box" ng-controller="controller">
<div align="center">
<h1>AngularJS Listbox with Checkbox2</h1>
<select style="width: 100%;" size="7" ng-model="items" multiple >
<!-- ng-options="month.name as month.name for month in months"> -->
<option ng-repeat="month in months" value="{{month.name}}" ng-selected="isSelected(month.name, month.selected)">
{{month.name}}
</option>
</select>
</div>
<br>
<div class="panel">
<div ng-repeat="month in months">
<div class="action-checkbox">
<input id="{{month.name}}" type="checkbox" value="{{month.name}}" ng-checked="selection.indexOf(month.name) > -1"
ng-click="toggleSelection(month.name)" ng-model="check"/>
<label for="{{month.name}}"></label>{{month.name}}<span> {{check}}</span>
</div>
</div>
<br>
<!-- SELECTED ITEMS -->
<span style="color:black;" class="selected-item">Selected Items:</span>
<div ng-repeat="name in selection" class="selected-item">{{name}}</div>
</div>
<h3>You have selected: {{items}}</h3>
</div>
</body>
</html>
Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire