Angular: Showing only checked items in a checkbox list - javascript

Is it possible to show only a list of checked items in a checkbox list?
What I want to do is select a few items on a checked list and when I press "Show only checked items", I want to toggle between showing only the checked items in the checkbox list and showing the entire list with the checked items.
I searched angular's site but wasn't able to find a solution to it.
Fiddle: http://jsfiddle.net/fjoLy5sq/422/
<div ng-controller="DemoCtrl">
<label ng-repeat="role in roles">
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
<br>
<button ng-click="checkAll()">check all</button>
<button ng-click="uncheckAll()">uncheck all</button>
<button ng-click="checkFirst()">check first</button>
<button ng-click="checkFirst()">Show only Checked</button>
<br><br>
user.roles {{ user.roles | json }}
</div>
Javascript:
angular.module("DemoApp", ["checklist-model"])
.controller('DemoCtrl', function($scope) {
$scope.roles = [
{id: 1, text: 'guest'},
{id: 2, text: 'user'},
{id: 3, text: 'customer'},
{id: 4, text: 'admin'}
];
$scope.user = {
roles: [2, 4]
};
$scope.checkAll = function() {
$scope.user.roles = $scope.roles.map(function(item) { return item.id; });
};
$scope.uncheckAll = function() {
$scope.user.roles = [];
};
$scope.checkFirst = function() {
$scope.user.roles.splice(0, $scope.user.roles.length);
$scope.user.roles.push(1);
};
});

Add a new variable in controller:
$scope.showAll = true;
In a view inverse the value of showAll when Show only Checked button is clicked:
<button ng-click="showAll = !showAll">Show only Checked</button>
To show only checked items, use Array.includes method, and check that current role is in user.roles:
<label ng-repeat="role in roles" ng-if="user.roles.includes(role.id)">
<input type="checkbox" checklist-model="user.roles" checklist-value="role.id"> {{role.text}}
</label>
Working demo

Related

Highlight moved item from one listbox to other listbox in angularjs

There are two listbox, We need move to list items between the box.
Moving the item from one to other isn't the question.
This is already posted in the question
AngularJS moving items between two select list
Here is the plunker link http://plnkr.co/edit/RYEmpkBjQStoCfgpWPEK?p=preview for moving one list item in other
The question/problem is how to highlight the moved item from one list item to other list item
<label for="aclients">Available Clients</label>
<select size="5" multiple ng-model="available" ng-options="client as client.name for client in availableclients" style="width: 400px"></select>
<input id="moveright" type="button" value="Add Client" ng-click="moveItem(available[0], availableclients,selectedclients)" />
<input id="moverightall" type="button" value="Add All Clients" ng-click="moveAll(availableclients,selectedclients)" />
<input id="move left" type="button" value="Remove Client" ng-click="moveItem(selected[0], selectedclients,availableclients)" />
<input id="moveleftall" type="button" value="Remove All Clients" ng-click="moveAll(selectedclients,availableclients)" />
<label for="sclients">Selected Clients</label>
Script
angular.module('app', []).controller('MoveCtrl', function($scope) {
$scope.moveItem = function(item, from, to) {
console.log('Move item Item: '+item+' From:: '+from+' To:: '+to);
//Here from is returned as blank and to as undefined
var idx=from.indexOf(item);
if (idx != -1) {
from.splice(idx, 1);
to.push(item);
}
};
$scope.moveAll = function(from, to) {
console.log('Move all From:: '+from+' To:: '+to);
//Here from is returned as blank and to as undefined
angular.forEach(from, function(item) {
to.push(item);
});
from.length = 0;
};
$scope.selectedclients = [];
$scope.availableclients = [
{
id: 1,
name: 'foo'
},
{
id: 2,
name: 'bar'
},
{
id: 3,
name: 'baz'
}
];
});
Early replies are appreciated.

Angularjs how to make checkbox checked?

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.
Basically, 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.com/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.com/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.com/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, 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;
});
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.com/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>
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/

Select all if all checkboxes are selected, angular js

On my page I have angular ui accordion, inside of each panel, I'm rendering list with items and checkboxes, also I have checkbox "select all".
For selection method and logic I used this resource. In this resource logic seems working, but however I'm putting this logic to my code, it stops working.
What I want to achieve is when all checkboxes are selected, checkbox "select all" has been selected automatically, and if some of checkboxes is unselect, checkbox "select all" has to be unselect as well.
I have tried multiple suggestions provided here, here, here, but in the end I'm getting the same result.
I appreciate if somebody could help me to resolve my problem.
$scope.categories = [
{
id: 1,
name: "category 1"
},
{
id: 2,
name: "category 2"
},
{
id: 3,
name: "category 3"
}
]
$scope.selectedAll = false;
$scope.selectAll = function(array) {
$scope.selectedAll = !$scope.selectedAll;
angular.forEach(array, function(item) {
item.Selected = $scope.selectedAll;
});
};
$scope.checkIfAllSelected = function(array) {
$scope.selectedAll = array.every(function(item) {
return item.Selected == true
})
};
html
<div>
<div class="row" ng-class="{'selected': selectedAll, 'default': !selectedAll}">
<div>Select all
<input type="checkbox"
ng-model="selectedAll" ng-click="selectAll(categories)" >
</div>
</div>
<div class="row" ng-repeat="item in categories | orderBy : 'id'" ng-class="{'selected': item.selected, 'default': !item.selected}">
<div > {{ item.name }}
<input type="checkbox"
ng-model="item.Selected" ng-click="checkIfAllSelected(categories)"
>
</div>
</div>
This is my plunker
Please take a look at this fork of your plunker: https://plnkr.co/edit/OW3F1VMke9iLuNkt5p3o?p=preview
Two things:
1. It's a good practice to create an object to your view model (you can find it under the name model in the plunker $scope.model. This will solve 2 way data binding issues.
2. I have changed the ng-click to ng-change (this is not part of the solution though - its just more correct in my opinion).
Please let me know if you need more clarifications.

AngularJS custom filter with checkbox and radio button

My application has to dynamically list file items using a Radio button, Checkbox and AngularJS custom filter (code given below).
I have tried few options, but could not get the working code.
I have created the fiddle link and find the same below:
https://jsfiddle.net/38m1510d/6/
Could you please help me to complete the below code to list the file items dynamically ?
Thank you.
<div ng-app="myApp" ng-controller="myCtrl">
<label>
<input type="radio" ng-model="inputCreatedBy" value="byX"
ng-click="myFilter(?, ?)"> by X
<input type="radio" ng-model="inputCreatedBy" value="byAll"
ng-click="myFilter(?, ?)"> by All
</label> <br/><br/>
<label>
<input type='checkbox' ng-model='Type1Files' ng-change='myFilter(?, ?)'>Type1 files
<input type='checkbox' ng-model='Type2Files' ng-change='myFilter(?, ?)'>Type2 files
</label>
<br/><br/>
<label ng-repeat="file in displayFiles | filter: myFilter(createdBy, fileType)">
{{ file.name }}
</label>
</div>
</body>
<script>
var app = angular.module("myApp",[]);
app.controller('myCtrl', function ($scope) {
$scope.files = [
{ name: 'file1', type:'Type1', createdBy: 'X' },
{ name: 'file2', type:'Type2', createdBy: 'X' },
{ name: 'file3', type:'Type2', createdBy: 'Y' },
{ name: 'file4', type:'Type1', createdBy: 'Y' }
];
$scope.displayFiles = [];
$scope.myFilter = function() {
return new function(createdBy, fileType) {
var displayFilesTemp = [];
for(i=0;i<$scope.files.length;i++) {
if($scope.files[i].type ==fileType && $scope.files[i].createdBy == createdBy && !checkArrayContainsObject(displayFilesTemp, displayFiles[i])) {
displayFilesTemp.push(displayFiles[i]);
}
}
return displayFilesTemp;
};
};
});
function checkArrayContainsObject(a, obj) {
for (var i = 0; i < a.length; i++) {
if (JSON.stringify(a[i]) == JSON.stringify(obj)) {
return true;
}
}
return false;
}
</script>
Here's a working fiddle - http://jsfiddle.net/1gfaocLb/
Radio is a unique value, so it's easy to filter by.
Selected types are array of values so it's needs a little more attention.
myApp.filter('typesFilter', function() {
return function(files, types) {
return files.filter(function(file) {
if(types.indexOf(file.type) > -1){
return true;
}else{
return false;
}
});
};
});
According the shared code / fiddle, I've simplified the code for a possible solution. The file filtering logic is not foreseen since it was not clear what needed to be done exact.
<body ng-app="myapp">
<div ng-controller="myctrl">
<label>
<input type="radio" ng-model="inputCreatedBy" value="byX"
ng-click="filterFiles()"> by X
<input type="radio" ng-model="inputCreatedBy" value="byAll"
ng-click="filterFiles()"> by All
</label> <br/><br/>
<label>
<input type='checkbox' ng-model='Type1Files' ng-change='filterFiles()'>Type1 files
<input type='checkbox' ng-model='Type2Files' ng-change='filterFiles()'>Type2 files
</label>
<br/><br/>
<label ng-repeat="file in filteredFiles">
{{ file.name }} <br/>
</label>
</div>
</body>
var app = angular.module("myapp",[])
app.controller('myctrl', function ($scope) {
$scope.files = [
{ name: 'file1', type:'Type1', createdBy: 'X' },
{ name: 'file2', type:'Type2', createdBy: 'X' },
{ name: 'file3', type:'Type2', createdBy: 'Y' },
{ name: 'file4', type:'Type1', createdBy: 'Y' }
];
$scope.filterFiles = function(){
// init dict
var files = [];
// loop & check files
angular.forEach($scope.files, function(value, key) {
// do file check and push to files.push when matching with criteria
files.push(value);
});
// set scope files
$scope.filteredFiles = files;
}
// init filter on ctrl load
$scope.filterFiles();
});
First, you don't have to use any directive as ng-if/ng-click to achieve what you want. Just changing how the values are binding into the radio button and checkbox can do the trick. Also you just need to do a custom filter to handle the checkbox selections, since radio button is unique. Take a look on my solution:
angular.module("myApp", [])
.controller('myCtrl', function($scope) {
$scope.files = [
{
"name":"file1",
"type":"Type1",
"createdBy":"X"
},
{
"name":"file2",
"type":"Type2",
"createdBy":"X"
},
{
"name":"file3",
"type":"Type2",
"createdBy":"Y"
},
{
"name":"file4",
"type":"Type1",
"createdBy":"Y"
}
];
})
.filter('typesFilter', function() {
return function(files, types) {
if (!types || (!types['Type1'] && !types['Type2'])) {
return files;
}
return files.filter(function(file) {
return types['Type1'] && file.type == 'Type1' || types['Type2'] && file.type == 'Type2';
});
};
});
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<form action="" name="form">
Created by:
<input type="radio" id="radio1" ng-model="criteria.createdBy" value="X">
<label for="radio1">by X</label>
<input type="radio" id="radio2" ng-model="criteria.createdBy" value="">
<label for="radio2">by All</label>
<br/>
<br/>
Type:
<input type="checkbox" id="check1" ng-model="criteria.type['Type1']">
<label for="check1">Type1 files</label>
<input type="checkbox" id="check2" ng-model="criteria.type['Type2']">
<label for="check2">Type2 files</label>
</form>
<pre ng-bind="criteria | json"></pre>
<div ng-repeat="file in files | filter: { createdBy: criteria.createdBy } | typesFilter: criteria.type" ng-bind="file.name"></div>
</body>
</html>

Active button states in Angular + Bootstrap

Seems like a simple problem but I'm actually having trouble with it.
Plunk here
Basically I have a ng-repeat of buttons and then a block of text after that clicking the button will show. However, when I click a button I want to hide the blocks of text from all the other buttons and remove the active states from the other buttons. Basically only 1 button block of text should be shown at a time.
Seems easy, but the way ng-hide handles scope (scope: true) means I can't really look into the other scopes and turn each of them off. The other thing is that I don't want to alter the actual array from ng-repeat if at all possible. This is data from an API that I have to send back and I'm attempting to not alter the actual data structure if I can.
<div class="row" ng-repeat="button in buttons">
<div class="col-sm-2">
<button ng-click="showInfo = !showInfo" class="btn btn-primary">{{button.name}}</button>
</div>
<div ng-show="showInfo" class="col-sm-3">
<div class="alert alert-success">{{button.extraInfo}}</div>
</div>
</div>
And JS
app.controller('MainCtrl', function($scope) {
$scope.buttons = [
{ name: 'One', extraInfo: 'Extra info for button 1' },
{ name: 'Two', extraInfo: 'Extra info for button 2' },
{ name: 'Three', extraInfo: 'Extra info for button 3' }
];
});
I suggest to create new array which has the same length as buttons array, and this array will hold boolean values to indicate where the item active or not.
I didn't log in to plunk so here the modified version of yours.
index.html
<body ng-controller="MainCtrl as vm">
<div class="row" ng-repeat="button in buttons track by $index">
<div class="col-sm-2">
<button ng-click="vm.setActive($index)" ng-class="vm.isActive[$index] ? 'btn btn-primary' : 'btn'">{{button.name}}</button>
</div>
<div ng-show="vm.isActive[$index]" class="col-sm-3">
<div class="alert alert-success">{{button.extraInfo}}</div>
</div>
</div>
</body>
app.js
app.controller('MainCtrl', function($scope) {
$scope.buttons = [
{ name: 'One', extraInfo: 'Extra info for button 1' },
{ name: 'Two', extraInfo: 'Extra info for button 2' },
{ name: 'Three', extraInfo: 'Extra info for button 3' }
];
var vm = this;
vm.isActive =[];
for(var i=0, len=$scope.buttons.length; i < len; i++){
vm.isActive[i] = false;
}
vm.setActive = function(ind) {
for(var i=0, len=vm.isActive.length; i < len; i++){
vm.isActive[i] = i===ind;
}
}
});
If you don't want to change the actual array, then maintain another object or array which will hold the key to each button's show/hide state.
$scope.showInfo = {};
$scope.buttons = [
{ name: 'One', extraInfo: 'Extra info for button 1' },
{ name: 'Two', extraInfo: 'Extra info for button 2' },
{ name: 'Three', extraInfo: 'Extra info for button 3' }
];
$scope.changeShowInfo = function(index) {
for(var prop in $scope.showInfo) {
$scope.showInfo[prop] = false;
}
$scope.showInfo[index] = true;
};
Solved Plunker
You want 1 button active each time, so you better use radio buttons with a currentItem kept in the scope by using ng-bind.
HTML:
<body ng-controller="MainCtrl">
<div name="myForm">
<div ng-repeat="button in buttons">
<label>
<input type="radio" ng-model="$parent.selectedItem" ng-value="button"> {{button.name}}
</label>
</div>
</div>
<div class="alert alert-success">Extra info: {{selectedItem.extraInfo}}</div>
</body>
Didn't need to change your JS.
See Plunker here

Categories

Resources