I am showing subsets of a list if a checkbox is checked. I would like to replace the X next to the checkbox with the count of the list matching the selection criteria. I have a plunker that does everything but count the subset here.
My Controller looks like this:
var app = angular.module('app', []);
app.controller('MainController', function($scope){
$scope.cbMarvel = true;
$scope.cbDCComics = true;
$scope.heroes = [
{
id: 1,
name: 'Iron Man',
fname: 'Tony',
lname: 'Stark',
location: 'Stark Tower',
comic: 'Marvel'
},
{
id: 2,
name: 'Batman',
fname: 'Bruce',
lname: 'Wayne',
location: 'Bat Cave',
comic: 'DC'
},
{
id: 3,
name: 'Superman',
fname: 'Clark',
lname: 'Kent',
location: 'Metroplis',
comic: 'DC'
},
{
id: 1,
name: 'Daredevil',
fname: 'Jack',
lname: 'Murdock',
location: 'Court Room',
comic: 'Marvel'
},
{
id: 5,
name: 'Flash',
fname: 'Barry',
lname: 'Allen',
location: 'Speedline',
comic: 'DC'
},
{
id: 6,
name: 'Hulk',
fname: 'Bruce',
lname: 'Banner',
location: 'Labratory',
comic: 'Marvel'
},
{
id: 7,
name: 'Hawkeye',
fname: 'Clint',
lname: 'Barton',
location: 'Nest',
comic: 'Marvel'
},
{
id: 8,
name: 'Thor',
fname: 'Donald',
lname: 'Blake',
location: 'Asgard',
comic: 'Marvel'
}
];
});
And my view looks like this:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery#2.0.3 current" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="angular.js#1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
<script data-require="angular-ui-bootstrap#*" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<fieldset>
<legend>Comments Log</legend>
<div class="row">
<div class="col-md-4">
<input type="checkbox" ng-model="cbMarvel"/> Marvel [X]
</div>
<div class="col-md-4"> </div>
<div class="col-md-4">
<input type="checkbox" ng-model="cbDCComics"/> DC Comics [X]
</div>
</div>
<div class="row"> </div>
<div class="row col-md-10">
<div ng-if="heroes.length == 0"><b>No Heroes Found!</b>
</div>
<div ng-repeat="h in heroes | filter:{comic:'Marvel'}" ng-show="cbMarvel">
{{ h.name}} - {{h.comic}}
</div>
<div ng-repeat="h in heroes | filter:{comic:'DC'}" ng-show="cbDCComics">
{{ h.name}} - {{h.comic}}
</div>
</div>
</fieldset>
</body>
</html>
Assuming your list of people is in data variable and you filter people using query model, the following code will work for you:
Number of visible people: {{(data|filter:query).length}}
Total number of people: {{data.length}}
summary
{{data.length}} - prints total number of people
{{(data|filter:query).length}} - prints filtered number of people
You could set that count in the view model itself while binding the data or just have a method on the scope that returns the count.
app.controller('MainController', function($scope, filterFilter){
....
$scope.getCount = function(strCat){
return filterFilter( $scope.heroes, {comic:strCat}).length;
}
...
});
and use it as:-
Marvel [{{getCount("Marvel")}}]
.....
DC Comics [{{getCount("DC")}}]
Plnkr
If the list is non changing when you are on the page i would suggest finding out the length and binding it to a property in the view model itself, and use it in the view.
//Set your data model
$scope.cbMarvel = {value:true, count:getCount('Marvel')};
$scope.cbDCComics = {value:true, count:getCount('DC')};
and in your view
<input type="checkbox" ng-model="cbMarvel.value"/> Marvel [{{cbMarvel.count}}]
Plnkr2
If your dataset is huge, instead of using filter inside the getCount, use a forEach and populate the count for each type at once.
Infact you do not need a filter at all, it seems inefficient to iterate through the same list using a filter in your case. Your's is a static list so categorize it in the controller itself.
var comics = $scope.comics = {}; //Dictionary of comics
//Create the collection here.
angular.forEach(heroes, function(itm){
if(!comics[itm.comic]){
comics[itm.comic] = {name:itm.comic, value:true, count:1, items:[itm] };
return;
}
comics[itm.comic].count++; //Incr count
comics[itm.comic].items.push(itm); //push specific item
});
and remove all the filters in your view and do:-
<div ng-repeat="h in comics.Marvel.items" ng-show="comics.Marvel.value">
{{ h.name}} - {{h.comic}}
</div>
<div ng-repeat="h in comics.DC.items" ng-show="comics.DC.value">
{{ h.name}} - {{h.comic}}
</div>
Plnk3 - the better one
Possible solution 1: Inline
You could actually save a reference to the filtered results in a variable: h in filtered.marvel = (heroes | filter:{comic:'Marvel'}), which you could use like so: filtered.marvel.length.
See: Plunkr
Possible solution 2: In the controller
You could also move this code to your controller:
$scope.filteredHeroes.marvel = $filter('filter')($scope.heroes, {comic:'Marvel'});
, which you could use by ng-repeat="hero in filteredHeroes.marvel"
and {{filteredHeroes.marvel.length}}
(Don't forget to add $filter as a controller dependency)
See: Plunkr
To find the count objects, I use <scope_obj>.length in the .html template.
Here's my controller:
conciergeControllers.controller('GuestMsgPreviewCtrl', ['$scope', 'GuestMessages',
function($scope, GuestMessages) {
$scope.guests = GuestMessages.query();
}]);
And template (each guest object has a messages attribute that is an array object, so .length returns the number of nested message objects:
<ul ng-repeat="guest in guests">
<li>[[ guest.messages.length ]]</li>
</ul>
Related
I'm very much new to angularjs so I'm facing this issue where i have a nested json, and i am using the parent value as a header and the values of the child as checkboxes. Now, when I want to retrieve the value of those checkboxes which have been ticked, i want it in the format of {parent_name:child_name} stored in an array.
I'm using the following sample data taken from this thread.
Data:
parents : [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: 'true'
},{
name: 'Amy',
age: 13,
isChecked: 'false'
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7,
isChecked: 'false'
},{
name: 'Lily',
age: 5,
isChecked: 'false'
},{
name: 'Kim',
age: 4,
isChecked: 'true'
}]
}]
And, my current output
looks like this
My HTML code is
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'"> {{child.name}}</label>
</div>
<hr>
</div>
Now, in reference to the image, I want to have {George:Jack} and {Jimmy:Kim} in an array, but i can't find a way to achieve that.
EDIT : I forgot to mention another important point, some checkboxes will be pre-selected. As per the data, checkbox for Jack and Kim will already be ticked on-load. I have to fetch the value for the pre-selected values as well as any newly checked checkboxes.
My Plunker code is here.
I hope my question is clear. Thanks in advance!
The proposed solution modifies your original JSON object.
If for some reasons, you have to keep the original JSON object, you should do a copy of it and store it in the controller scope (Angular has functions to do it).
The idea is to add a isChecked attribute in the original JSON object which will be values to false by default and that will be set to true when the checkbox is selected or false when the checkbox is unselected.
That is possible by using the ng-model directive which binds here a html input to a variable in JS side.
Here is the plunker :
http://plnkr.co/edit/EzDp3mMtlnH3t4bIz8e6?p=preview with Angular js 1.5.
js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.parents = [{
name: 'George',
age: 44,
children: [{
name: 'Jack',
age: 16,
isChecked: true;
},{
name: 'Amy',
age: 13
}]
}, {
name: 'Jimmy',
age: 38,
children: [{
name: 'Max',
age: 7
},{
name: 'Lily',
age: 5
},{
name: 'Kim',
age: 4,
isChecked: true;
}]
}]
$scope.submit= function(){
var results = [];
for (var i=0; i< $scope.parents.length; i++){
var parent = $scope.parents[i];
for (var j=0; j< parent.children.length; j++){
var child = parent.children[j];
if (child.isChecked){
results.push(parent.name +":"+ child.name);
}
}
}
//display info
for ( i=0; i< results.length; i++){
console.log(results[i]) ;
}
}
});
html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label><input type="checkbox" ng-checked="child.isChecked=='true'" ng-model="child.isChecked">
{{child.name}}</label>
</div>
<hr>
</div>
</div>
<button type="button" ng-click="submit()" class="btn btn-success width-80px">Submit</button>
</body>
</html>
Using the ngChecked directive, you can only mark the checkbox as checked if the expression (here child.checked=='true') is truthy. However, it doesn't affect the value of your variable child.checked.
I recommand you to use instead the ngModel directive which will bind the value of your checkbox with child.checked (or any other variable).
<div class="col-md-12 col-xs-12" ng-repeat="parent in parents ">
<div class="form-group">
<label>{{parent.name}}</label>
<div class="input-group" ng-repeat="child in parent.children">
<label>
<input type="checkbox" ng-model="child.checked">{{child.name}}
</label>
</div>
<hr>
</div>
Since child.checked is not defined at the begining, it will be falsy so the checkbox won't be checked. You can change this behaviour by setting it to true.
Then, to create an array of your results, you can do something like this:
var results = [];
parents.forEach(function (parent) {
parent.children.forEach(function (child) {
if (child.checked) {
var couple = {};
couple[parent.name] = child.name;
results.push(couple);
}
});
});
So currently I am following the course 'shaping up with angular.js', I quite like it so far but I am only on 1.5 'Built in Directives'. But I can't get my head around the ng-repeat what they using in the course.
So what you need to to do is just put ng-repeat on the div and it should loop through all items in the array and show them. Maby I mistyped something but I rewrote the thing 2 times and read it over like a 100 times.. :(
This is my current html template
<html lang="en" ng-app="store">
<body ng-controller="storeController as store">
<div ng-hide="store.product.soldOut" ng-repeat="product in store.products">
<h1>{{store.product.name}}</h1>
<h2>${{store.product.price}}</h2>
<p>{{store.product.description}}</p>
<button ng-show="store.product.canPurchase"> Add to cart </button>
</div>
</body>
</html>
And this is my app.js file.
(function () {
var app = angular.module('store', []);
app.controller('storeController', function () {
this.products = gems;
});
var gems = [
{
name: 'Dodecahedron',
price: 295,
description: 'Nice gem',
canPurchase: true,
soldOut: false
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "more nice gems",
canPurchase: true,
soldOut: false
}
]
})();
I can't seems to find out why it isn't repeating itself. And I dont even know why in the course they say 'product in store.products' there is no 'product' called anywhere.
I put it in a codepen also
http://codepen.io/denniswegereef/pen/JYwora
Remove the "store" from your inline bindings. The moment you use ng-repeat you reference your data object from the in clause like this:
<div ng-hide="product.soldOut" ng-repeat="product in store.products">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase"> Add to cart </button>
</div>
Your code is messy. Here is the correct version
var app = angular.module('store', []);
app.controller('storeController', function ($scope) {
$scope.products = [
{
name: 'Dodecahedron',
price: 295,
description: 'Nice gem',
canPurchase: true,
soldOut: false
},
{
name: "Pentagonal Gem",
price: 5.95,
description: "more nice gems",
canPurchase: true,
soldOut: false
}
];
});
<html lang="en" ng-app="store">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
</head>
<body ng-controller="storeController">
<div ng-repeat="product in products">
<div ng-hide="product.soldOut">
<h1>{{product.name}}</h1>
<h2>${{product.price}}</h2>
<p>{{product.description}}</p>
<button ng-show="product.canPurchase"> Add to cart </button>
</div>
</div>
</body>
</html>
This is not displaying data, I am learning about controllers. Why it is not displaying data while it displays data in the video I am watching.
<div data-ng-controller="FirstController">
<input type="text" name="txtName" data-ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul >
<li data-ng-repeat="person in Customers | orderBy:'name' | filter:typedName "> {{ person.name | uppercase}} - {{ person.city }}
</li>
</ul>
</div>
<script>
function FirstController($scope) {
$scope.Customers = [
{ name: 'Sita', city: 'Los Angeles' },
{ name: 'Ram', city: 'Los Vegas' },
{ name: 'Amit', city: 'San Antonio' },
{ name: 'Cat', city: 'Arkanas' },
{ name: 'Boushick', city: 'Pittsburgh' }
];
}
</script>
<script src="Scripts/angular.min.js"></script>
Looks like you're following older videos where they mmight be using angular 1.2.
In latest version of angular, it's mandatory to specific app name and declare controllers under those modules. Though you can activate global controller functions via config but its not recommended.
So you need to make the following changes:
In your HTML,
<html data-ng-app="myApp">
NOw in your JS for controller:
angular.module("myApp", [])
.controller("ControllerName", function($scope) {
// declare your $scope data here
})
Why global controller functions are deprecated?
When you declare controller functions globally, It will be polluting the global namespace. Assume there is another library which is using the same function name, then your function would be overriden.
For example,
you have function SimpleController in your file. Assume some third party library you're using, they also use same name for some functionality.
They set,
window.SimpleController = window.alert
So it means your controller function has been overriden.
that's why it's been deprecated.
From the code you provided I believe its not working because you have not declared an Angular Module in your javascript and linked it to your html view via ng-app. Please check the working Plunker below.
http://plnkr.co/edit/fwwzZwODfZ9G5Ml1Y1MS?p=preview
<body ng-app="myApp">
<div ng-controller="FirstController">
<input type="text" name="txtName" ng-model="typedName" />
<br />
Typed Name is: {{ typedName }}
<br />
Names:
<ul>
<li data-ng-repeat="person in Customers | orderBy:'name' | filter:typedName ">
{{ person.name | uppercase}} - {{ person.city }}
</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.controller('FirstController', function($scope) {
$scope.Customers = [
{ name: 'Sita', city: 'Los Angeles' },
{ name: 'Ram', city: 'Los Vegas' },
{ name: 'Amit', city: 'San Antonio' },
{ name: 'Cat', city: 'Arkanas' },
{ name: 'Boushick', city: 'Pittsburgh' }
];
});
</script>
</body>
I am having a hard time with ngOptions in that I need to have a label have multiple values, where selecting a value will determine what is evaluated in the view. For example, if the label is Boy, the value could be he or him. And then depending on the sentence will depend on whether he or him is used.
HTML:
<!DOCTYPE html>
<html ng-app="myTest">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="TestController">
<select ng-model="test" ng-options="gen.pick group by gen.gender for gen in gender">
</select>
<p>{{ gender.value }} is a girl</p>
<p>{{ gender.value }} is a boy</p>
</body>
</html>
Code:
angular.module('myTest', []).controller('TestController', function($scope) {
$scope.gender = [
{ pick: 'she', gender: 'female'},
{ pick: 'her', gender: 'female'},
{ pick: 'he', gender: 'male'},
{ pick: 'him', gender: 'male'}
];
})
You could do this with ng-show or ng-if:
<span ng-show="test.gender == 'female'">
<p ng-show="test.pick == 'she'">{{ test.pick }} is a girl</p>
<p ng-show="test.pick == 'her'">{{ test.pick }} hair is pretty</p>
</span>
<p ng-show="test.gender == 'male' && test.pick == 'he'">{{ test.pick }} is a boy</p>
A mapping object could clean it up a little:
$scope.type = {'she': 'girl', 'he': 'boy' };
...
<p ng-if="type[test.pick]">{{test.pick}} is a {{type[test.pick]}}</p>
This example is not dissimilar to j.wittwer's approach, but I used a single object containing all of the relevant data and then used Underscore to find and filter data from that source.
It sounds like you're having a tough time conceptualizing a solution, so I thought it might be helpful for you to see a few approaches at what we think you're trying to get at.
JS (from controller)
$scope.sentenceComponents = [
{ pronoun: 'she', gender: 'girl', sentenceType: 1},
{ pronoun: 'her', gender: 'girl', sentenceType: 2},
{ pronoun: 'he', gender: 'boy', sentenceType: 1},
{ pronoun: 'him', gender: 'boy', sentenceType: 2}
];
$scope.genders = _.uniq(_.pluck($scope.sentenceComponents, 'gender'));
$scope.sentenceTypes = _.uniq(_.pluck($scope.sentenceComponents, 'sentenceType'));
$scope.selectChange = function() {
$scope.selectedComponents = _.findWhere($scope.sentenceComponents, {gender: $scope.selectedGender, sentenceType: $scope.selectedType});
};
$scope.selectedGender = 'girl';
$scope.selectedType = 1;
$scope.selectChange();
HTML
<select ng-model="selectedGender" ng-options="gender for gender in genders" ng-change="selectChange()"></select>
<select ng-model="selectedType" ng-options="sentenceType for sentenceType in sentenceTypes" ng-change="selectChange()"></select>
<p ng-show="selectedComponents.sentenceType == 1">
{{ selectedComponents.pronoun }} is a {{ selectedComponents.gender }}
</p>
<p ng-show="selectedComponents.sentenceType == 2">
The {{ selectedComponents.gender }} took the books from {{selectedComponents.pronoun}}
</p>
Plunker Demo
I am a beginner for AngularJS. I am trying to display "No Tag Found" during filter process with the help of "ng-show".
JS:
function simpleController($scope)
{
$scope.tags = ['HTML','CSS','Jquery','Bootstrap','AngularJS'];
}
HTML:
<div ng-controller="simpleController">
<input class="txt" type="text" ng-model="nameText" />
<div>
<ul>
<li ng-repeat="myKeys in tags| filter:nameText">{{myKeys}}</li>
</ul>
<div ng-show="!tags.length">No Tag Found</div>
</div>
</div>
When I type any value other than array vales, I am not able to get "No Tag Found" using the above code. Please help. Thanks.
If you're filtering in your ng-repeat, you must apply the same filter for you ng-show. If you don't, the ng-show will always refer to the full array :
<div ng-show="!(tags| filter:nameText).length">No Tag Found</div>
Working fiddle : http://jsfiddle.net/HB7LU/3149/
Just better use ng-hide:
<div ng-hide="tags.length">No Tag Found</div>
<div class="box" ng-show="team_stores.length > 0" >
worked for me
easy way to create filter... demo is as below
var app = angular.module('myApp', []);
app.controller('myctrl', function ($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
});
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myctrl">
Name: <input ng-model="filter" type="text" />
<ul>
<li ng-repeat="friend in friends |filter:filter">{{friend.name}}</li>
<li ng-show="!(friends| filter:filter).length">data not found</li>
<!--<link ng-repeat="friend in friends|filter:isActive ">-->
</ul>
</body>
</html>
Also you can try to use filter service, like this: $filter('filter')(array, expression, comparator), this service return new array.
you can see http://code.angularjs.org/1.2.16/docs/api/ng/filter/filter