Some time back I was looking for multi select checkbox group option in angularjs. I could not able to find my self on stackoverflow, Since i have developed it and sharing here js fiddle link.
<div ng-app="check">
<div ng-controller="controller">
<ul>
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields">
<label>
<input type="checkbox" ng-model="sub_catval.checked" /> {{sub_catval.name}} -- {{sub_catval.checked}} | json
</label>
</li>
</ul>
</li>
</ul>
Selected show here
<li ng-repeat="(key, item) in basket"> {{item.type}}
<ul>
<li ng-repeat="(sub_catkey, sub_catval) in item.fields | filter: true">
<label>
{{sub_catval.name}} -- {{sub_catval.checked}}
</label>
</li>
</ul>
</li>
{Manager: {Name: filter.key}}
{{basket}}
angular.module('check', [])
.controller('controller', function($scope) {
$scope.basket = [
{
"type": "fruits",
"fields": [
{name: 'Apple', checked:false},
{name: 'Mango', checked:true},
{name: 'Banana', checked:false},
{name: 'Guava', checked:false},
{name: 'Orange', checked:false}
]
},
{
"type": "flowers",
"fields": [
{name: 'rose', checked:true},
{name: 'lilly', checked:false},
{name: 'tulip', checked:false},
{name: 'marigold', checked:false},
{name: 'sunflower', checked:false}
]
}
];
$scope.selected = {
fruits: ["Apple"],
flowers: []
};
$scope.checkAll = function() {
$scope.basket = angular.copy($scope.basket);
};
$scope.uncheckAll = function() {
$scope.selected.fruits = [];
};
});
http://jsfiddle.net/42y83eLb/
Related
I have an object with an array:
{
People: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}],
Places: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}]
}
I have an ng-repeat to create a list. I can bind to the properties inside People and Places but cannot bind to the name 'People' and 'Places'.
My html is something like this:
<div ng-repeat="category in vm.categories">
<button>{{category}}</button>
<ul>
<li ng-repeat="subcategory in category">
{{subcategory.label}}
</li>
</ul>
</button>
</div>
so subcategories are all fine but {{category}} doesn't return People/Places. How do I bind to the name of the array in the object?
Try this by using iterate over the keys and values with ng-repeat in AngularJS?
angular.module("test",[]).controller("testc",function($scope) {
$scope.categories = {
People: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}],
Places: [
{
label: 'label1',
type: 'type1'
},
{
label: 'label2',
type: 'type2'
}]
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="testc">
<div ng-repeat="(key, value) in categories">
<button>{{key}}</button>
<ul>
<li ng-repeat="subcategory in value">
{{subcategory.label}}
</li>
</ul>
</button>
</div>
</div>
i am new in angular. so i was reading write up just to accomplish my job. this way i will try but not sure that am i going in right direction? here is my sample code
<ul>
<li ng-repeat="parent in items">{{parent.pitem}}
<ul>
<li ng-repeat="child in parent.citems">{{child.pitem }}</li>
</ul>
</li>
</ul>
var app = angular.module('myapp', []);
app.controller('MyCtrl', function ($scope) {
$scope.items = [{ "pitem": "Coffee", "citems": "" }, { "pitem": "Tea", "citems": [{ "pitem": "Black tea", "citems": "" }, { "pitem": "Green tea", "citems": "" }] }, { "pitem": "Milk", "citems": "" }]
});
i actually i need to show employee hierarchy like manager and their subordinate.
i also read this too on the same kind of topic written by #zsong https://stackoverflow.com/a/18295177/6188148
so please help me to generate tabular output with ng-repeat using ul,li and end user should be able to expand collapse rows too. please have a look at this url http://maxazan.github.io/jquery-treegrid/examples/example-bootstrap-3.html i want similar kind of output but with ng-repeat.
see this url http://www.lidorsystems.com/support/articles/angularjs/treegrid/tree-grid-filter.aspx then can understand what kind of output i am trying to build with ng-repeat.
please guide and suggestion.
This JSFiddle https://jsfiddle.net/benfosterdev/NP7P5/ shows exactly what you are looking for:
Recursion
<div ng-app="app" ng-controller='AppCtrl'>
<script type="text/ng-template" id="categoryTree">
{{ category.title }}
<ul ng-if="category.categories">
<li ng-repeat="category in category.categories" ng-include="'categoryTree'">
</li>
</ul>
</script>
<ul>
<li ng-repeat="category in categories" ng-include="'categoryTree'"></li>
</ul>
</div>
Json object
$scope.categories = [
{
title: 'Computers',
categories: [
{
title: 'Laptops',
categories: [
{
title: 'Ultrabooks'
},
{
title: 'Macbooks'
}
]
},
{
title: 'Desktops'
},
{
title: 'Tablets',
categories: [
{
title: 'Apple'
},
{
title: 'Android'
}
]
}
]
},
{
title: 'Printers'
}
];
});
Output should be
Name : AAA, Type: Flower
Name : BBB, Type: Bird
Controller
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
}
HTML
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ ??? }}
</div>
</div>
</div>
How can I retrieve a matching element in $scope.types by 'item.type'?
Your controller should be:
angular.module('myApp', []).controller('myCtrl', myCtrl);
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
$scope.getType = function(id){
return $scope.types.filter(function(item){
return (item.id === id);
})[0].name;
}
}
And template:
<div ng-app='myApp'>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.type) }}
</div>
</div>
</div>
I worked here: http://jsfiddle.net/f9019o5k/2/
Write and function in your controller which will return the required type. Doing entire thing in HTML might make it unreadable and complex
$scope.getType(id){
return $scope.items.filter(function(item){
item.id === id;
});
}
And call it in your HTML as
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.id) }}
</div>
</div>
</div>
Its too simple if we Use angular filters to achieve this.
app.filter('myFilter ', function() {
return function(input,obj) {
angular.forEach(obj,function(val){
if(val.id == input)
{
return val.name;
}
})
};
});
Html
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ item.type | myFilter:types }}
</div>
</div>
</div>
Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.
The problem:
Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?
Controller:
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
View:
<div ng-controller="MyCtrl">
<label for="1">Please select items:</label>
<select id="1"
ui-select2
multiple
ng-model='selectedDaltons'
ng-options="dalton.id as dalton.name for dalton in daltons">
</select>
<label for="2">Selected Items:</label>
<ul id="2">
<li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
</ul>
</div>
Here it is as a jsfiddle
I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:
http://jsfiddle.net/u48j0yyc/1/
<div ng-controller="MyCtrl">
<label>Please select items:</label>
<select ui-select2 multiple ng-model='selectedDaltons'>
<option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
</select>
<label>Selected Items:</label>
<ul>
<div ng-bind="selectedDaltons"></div>
</ul>
</div>
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
I need a way to order a list by its properties.
I have this plunker: http://jsfiddle.net/Tropicalista/aF2aL/1/
but don't know hoe to proceed. I need a way to order the list based on what I select in checkboxes...
function myCtrl($scope){
$scope.friends = [
{
name: "Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "George Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "Gob",
gender: "Male",
hair: "Brunette"
},
{
name: "Tobias",
gender: "Male",
hair: "Black"
},
{
name: "Lindsay",
gender: "Female",
hair: "Blonde"
},
{
name: "Maeby",
gender: "Female",
hair: "Black"
}
];
$scope.orderBy = function(target){
$scope.groups = _.groupBy($scope.friends, target);
}
$scope.activeGroups = {};
}
And this is my html:
<input type="checkbox" ng-click="orderBy('name')" />Name
<input type="checkbox" ng-click="orderBy('gender')" />Gender
<input type="checkbox" ng-click="orderBy('hair')" />Hair
<div data-ng-repeat="(myFilter, users) in groups">
<h2>{{myFilter}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
First, for something like this, I much prefer using a radio instead of a checkbox. It is semantically correct. Check boxes indicate that you can group by more than one field, and it doesn't appear, from your question, that you are trying to do that.
Knowing that, you can define your radios like this:
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair
Now, you can just tell your ng-repeat to group based on a groupedFriends collection:
<div data-ng-repeat="(group, users) in groupedFriends">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
And then your controller just watches the grouping variable and group the data:
$scope.$watch('grouping', function() {
$scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
});
$scope.grouping = "gender";
Here is a working fiddle.
STEVE HOLT!
You can use groupBy of angular.filter module, It's easy to use, and actually more fast than lodash implementation see: link.
Usage: (key, val) in collection | groupBy: 'property' or nested.property
here's an example:
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath
UPDATE: jsbin