Develop Reference

Filter json objects with Angular js ng-repeat directive

In my angular js controller, I have a json array that contains continents and inside the continents contain an array of countries
//CONTROLLER
app.controller('CountryController', function(){
this.continents =
[
{
name:'Africa',
countries:
[
{ name: 'Algeria', code:'DZ', operators:'3'},
{ name: 'Angola', code:'AO', operators:'1'},
{ name: 'Benin', code:'BJ', operators:'2'},
{ name: 'Burkina Faso', code:'BF', operators:'1'}
],
},
{
name:'AsiaPacific',
countries:
[
{ name: 'Afghanistan', code:'AF', operators:'4'},
{ name: 'Bahrain', code:'BH', operators:'2'}
],
}
];
});
In my view i want to display the countries in tabbed elements arranged by continents i.e I have tabs to hold the countries in each continent. e.g i have a tab for Africa and inside this tab i want to display the countries in the Africa object.
I have tried using the 'filter' to display only countries in a particular continent in each tab but it is not working neither does anything show up. On inspecting the element the code seems to be commented. This is the first task I am trying to accomplish using Angular-js so I am still learning the ropes.
This is what my view looks like
<div ng-app="countriessupported" class="container container_with_height">
<div ng-controller="CountryController as countryCtrl" id="myTabContent" class="tab-content hidden-xs">
<div class="tab-pane fade active in" id="africa">
<div class="col-md-12 countries_col-12" ng-repeat="continent in countryCtrl.continents.name | filter: 'Africa' ">
<a href="">
<div class="col-md-3 country_container" ng-repeat="country in continent.countries">
<div class="country_name">
{{ country.name }}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
So the idea is to have the countries repeated in the div with class col-md-3
How can i achieve this please?

Try this html Code
<div ng-app="countriessupported" class="container container_with_height">
<div ng-controller="CountryController as countryCtrl" id="myTabContent" class="tab-content hidden-xs">
<div class="tab-pane fade active in" id="africa">
<div class="col-md-12 countries_col-12" ng-repeat="continent in countryCtrl.continents | filter: 'Africa' ">
<a href="">
<div class="col-md-3 country_container" ng-repeat="country in continent.countries">
<div class="country_name">{{ country.name }}</div>
</div>
</a>
</div>
</div>
</div>
</div>
let me know if this is helpful

Try to change you first repeater to this ng-repeat="continent in countryCtrl.continents instead of ng-repeat="continent in countryCtrl.continents.name the filter sholud be working anyway

Angular Checkbox Filter with Paginator

I'm using this AngularJS paginator, https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination.
And I'm also using the example in this video to add checkbox filters to my ng-repeat. I want to filter based on whether the specie property of every animal object (animal.specie) is a cat or a dog. I start setting both to true but my ng-repeat doesn't populate when I do that. And when I check a box to true or false nothing happens.
The only thing in the controller is $scope.species = {dogs: true, cats: true};
What is wrong with my implementation? Any help will be much appreciated.
Thanks :)
<div class="row adopt-title-wrap">
<div class="medium-6 large-6 column">
<h3>Find Your Next Best Friend</h3>
</div>
<div class="medium-2 large-2 end column">
<input type="checkbox" ng-model="species.cats">
<label>Cats Only</label>
</div>
<div class="medium-2 large-2 end column">
<input type="checkbox" ng-model="species.dogs">
<label>Dogs Only</label>
</div>
</div><br>
<i class="fa fa-spinner fa-pulse fa-3x"></i>
<div class="row">
<!-- Start Single Animal Record -->
<div class="medium-6 large-6 end column" dir-paginate="animal in animals
| filter: {specie: 'Dog'} : species.dogs
| filter: {specie: 'Cat'} : species.cats
| itemsPerPage: 6">
<div class="panel">
<img class="pet-img" ng-src="{{ animal.profile_photo }}" alt="pet for adoption">
<ul class="pet-details">
<li class="pet-field-title">Name</li>
<li class="pet-field-value">{{ animal.name }}</li>
<li class="pet-field-title">Age</li>
<li class="pet-field-value">{{ animal.dob }}</li>
<li class="pet-field-title">Breed</li>
<li class="pet-field-value">{{ animal.breed }}</li>
<li class="pet-field-title">Code</li>
<li class="pet-field-value">{{ animal.shelter_code }}</li>
</ul>
<p class="pet-description">{{ animal.description }}</p>
</div>
</div> <!-- End Single Animal Record -->
</div>
<dir-pagination-controls></dir-pagination-controls>

I would recommend stripping down your code to the base, maybe just get everything displayed and then migrate to pagination. I can spot your first issue is you are applying two filters on specie.
dir-paginate="animal in animals | filter: {specie: 'dog'} | filter: {specie: 'cat'}"
is basically saying filter down to animals that are both a dog and a cat. The first filter will return an array of only dogs, then the second filter will run on that finding only cats, which is none because obviously you can't be a dog and a cat :)
Original Array: [{name: 'bob', specie: 'cat'}, {name: 'jeff', specie: 'dog'}] | filter dogs | filter cats
After First Filter (only dogs): [{name: 'jeff', specie: 'dog'}] | filter cats
After Second Filter (only animals that are both dogs and cats): []
Try defining your own angular filter to simplify your work as so:
.filter('isCatOrDog', function() {
return function(inputAnimals) {
return inputAnimals.filter(function(animal) {
return animal.value === 'cat' || animal.value === 'dog';
});
}
});
And you call the filter as so:
dir-paginate="animal in animals | isCatOrDog"
Basic Plunkr

Just learned that Angular filters don't have (at least not yet) the functionality I was looking for. So I worked around the issue by changing the check boxes to radio buttons and make a different backend API call based on the radio selected.
template:
<div class="row adopt-title-wrap">
<div class="medium-5 large-5 column">
<h4>Find Your Next Best Friend!</h4>
</div>
<div class="medium-1 large-1 column">
<i class="fa fa-spinner fa-pulse fa-2x"></i>
</div>
<div class="medium-2 large-2 column">
<input type="radio" ng-model="species" value="all">
<label>Show All</label>
</div>
<div class="medium-2 large-2 column">
<input type="radio" ng-model="species" value="cats">
<label>Cats Only</label>
</div>
<div class="medium-2 large-2 column end">
<input type="radio" ng-model="species" value="dogs">
<label>Dogs Only</label>
</div>
</div>
<div class="row">
<!-- Start Single Animal Record -->
<div class="single-record medium-6 large-6 end column" dir-paginate="animal in animals | itemsPerPage: 6">
<div class="panel">
<img class="pet-img" ng-src="{{ animal.profile_photo }}" alt="pet for adoption">
<ul class="pet-details">
<li class="pet-field-title">Name</li>
<li class="pet-field-value">{{ animal.name }} ({{animal.specie }})</li>
<li class="pet-field-title">Age</li>
<li class="pet-field-value">{{ animal.dob }}</li>
<li class="pet-field-title">Breed</li>
<li class="pet-field-value">{{ animal.breed }}</li>
<li class="pet-field-title">Code</li>
<li class="pet-field-value">{{ animal.shelter_code }}</li>
</ul>
<p class="pet-description">{{ animal.description }}</p>
</div>
</div> <!-- End Single Animal Record -->
</div>
<dir-pagination-controls></dir-pagination-controls>
Controller:
angular.module('animalShelterApp')
.controller('AdoptCtrl', function ($scope, SharedServices) {
var spinner = angular.element('.fa-spinner'); // Holds spinner element.
/*
* Binds 3 radio buttons (all, cats, dogs).
* Load 'all' records by default.
*/
$scope.species = 'all';
/*
* When user selects a specie, display appropriate data.
*/
$scope.$watch('species', function() {
spinner.show();
if ($scope.species === 'all') {
/*
* Get all available animals.
*/
SharedServices.getAllAnimals().success(function(data) {
spinner.hide();
$scope.animals = data;
});
} else if ($scope.species === 'cats') {
/*
* Get all available Cats.
*/
SharedServices.getAllCats().success(function(data) {
spinner.hide();
$scope.animals = data;
});
} else if ($scope.species === 'dogs') {
/*
* Get all available Dogs.
*/
SharedServices.getAllDogs().success(function(data) {
spinner.hide();
$scope.animals = data;
});
}
}); // end $scope.$watch('species').
}); // end AdoptCtrl.

Angular variables not updating outside loop

So I'm running into a weird issue with Angular where I created a raw predefined object to loop through card stats for a card game I am working on.
$scope.attack = 500;
$scope.defense = 500;
$scope.cardPowers = [
{
name: "balanced",
attack: 2500,
defense: 1500,
cost: 3
},
{
name: "high-offense",
attack: 2500,
defense: 1000,
cost: 5
},
{
name: "base-offense",
attack: 1800,
defense: 1000,
cost: 4
}
];
This is all in the main controller where most of my functionality is going through. I'm looping through them and creating buttons where someone can choose the attributes for the car like so:
<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
<ul>
<li>SAVE <i class="fa fa-floppy-o"></i></li>
<li>EDIT <i class="fa fa-pencil-square-o"></i></li>
<li>CLOSE <i class="fa fa-times"></i></li>
</ul>
<!-- <i class="fa fa-file-image-o"></i> Save as Image -->
</div>
<div ng-show="editing" class="options">
<h4>Choose Power</h4>
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{attack}}</p>
<h4>Thumbnail Positioning</h4>
<!-- repeat card positioning -->
</div>
<div ng-show="gotComics">
<?php include('flip-container-code.php'); ?>
</div>
Mostly everything works fine, however, when I click on my button to set the new attack, it only updates {{attack}} inside the loop, and not outside. See this screencast to see what I am talking about: http://screencast.com/t/0ZukLLYqtUYM
Not sure why this is happening, did some research and it seems I am doing this all right, so it's odd. Note: Everything else is actually working just fine, my card saving function, seeing the default attack and defense values, the models, etc.

To start, you should move the implementation details outside of the view (i.e., you shouldn't be directly setting model.attack = power.attack in the view, that should be at least one level deeper, in the controller). With that, moving this to the controller will resolve your issue itself.
Your view can look like this:
<p ng-repeat="power in cardPowers">
<a href="" ng-click="setAttackPower(power)">
{{power.name | uppercase}} {{attack}}
</a>
</p>
And in your controller:
$scope.setAttackPower = function(power) {
$scope.attack = power.attack;
}

If I understand your problem right, try to put the attack property inside an object. This is because when you do attack = power.attck inside ng-repeat you are creating a new property on the child scope created by the ng-repeat instead of changing the value of the attack on the parent scope.
In your controller:
$scope.model = {attack: 500};
And your html:
<div id="preview" class="vertical-display card twenty-five building" ng-class="{'building': gotComics, 'editing' : editing}" ng-controller="Save">
{{model.attack}} : {{defense}}
<h3>Card Builder</h3>
<div class="card-functions">
<ul>
<li>SAVE <i class="fa fa-floppy-o"></i></li>
<li>EDIT <i class="fa fa-pencil-square-o"></i></li>
<li>CLOSE <i class="fa fa-times"></i></li>
</ul>
<!-- <i class="fa fa-file-image-o"></i> Save as Image -->
</div>
<div ng-show="editing" class="options">
<h4>Choose Power</h4>
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{model.attack}}</p>
<h4>Thumbnail Positioning</h4>
<!-- repeat card positioning -->
</div>
<div ng-show="gotComics">
<?php include('flip-container-code.php'); ?>
</div>
See here for further explanation.

Try to accest the parent and it should work
Like this on ng-click:
<p ng-repeat="power in cardPowers">{{power.name | uppercase}} {{attack}}</p>

ng-repeat nested inside Popover not working

I have the following ng-repeat list:
<div class="row msf-row"
ng-repeat="record in recordlist
people-popover>
<div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">
<button class="btn btn-primary form-control msf-paxlist"
rel="popover"
data-content="<li ng-repeat='passanger in record.pax'>
{{passanger.name}}
</li>"
data-original-title="Passanger List">
{{record.pax.length}} <i class="fa fa-user"></i>
</button>
</div>
</div>
I initialize the popover with a directive:
.directive('peoplePopover', function() {
return function(scope, element, attrs) {
element.find("button[rel=popover]").popover({ placement: 'bottom', html: 'true'});
};
})
The problem is the <li ng-repeat="pasanger in record.pax">{{pasanger.name}}</li>, which will not show.
If I use <li ng-repeat="record.pax">{{pax}}</li>, it will display the array, but if I try to list the objects of the array with ng-repeat, it won't work.
This is how the array (record) looks like:
record in recordlist {
date : "02/12/2014"
time : "00.02.01"
car : "369"
pax: [
{
name : "Ben"
chosen : true
},
{
name : "Eric"
chosen : true
}
]
}
Any tips?

I ran into similar problem and I solved it this way.
I wrapped the ng-repeat block in another directive and pass the collection to that external directive.
div class="row msf-row"
ng-repeat="record in recordlist
people-popover>
<div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">
<button class="btn btn-primary form-control msf-paxlist"
rel="popover"
data-content="<new-directive records=record.pax></new-directive>"
data-original-title="Passanger List">
{{record.pax.length}} <i class="fa fa-user"></i>
</button>
</div>
</div>
Inside the new directive, you will have this code.
<li ng-repeat='passanger in record.pax'>
{{passanger.name}}
</li>
Hopefully this helps someone who runs into similar problem.

angular nested ng-repeat failure

it's me again :)
I am still at the very beginning with angularJS and I have just encountered a problematic issue.
I've got an array with some data that I want to be rendered on the page that's why I use ng-repeat but I also need to include another ng-repeat in the previous one.
I have the general ng-repeat="dialog in dialogWindows" and lower in the DOM ng-repeat="input in dialog.inputs", but the second ngRepeat dousnt work and it reports no errors in the coonsole. can You help me please?
Here is the JS:
var antroApp = angular.module('antroApp', []);
function dialogWindows($scope){
$scope.dialogWindows = [
{id:0,
idName:"pigmentation",
number:"1",
name:"Pigmentation",
answer1:"Clear complexion",
answer2:"Semi-swarthy complexion",
answer3:"Swarthy complexion",
answer4:"",
answer5:"",
answer6:"",
inputs:[{id:0,a:"a1",answer:"a"},
{id:1,a:"a2", answer:"b"}],
}
];
}
antroApp.controller('antroApp', antroApp);
and here is my HTML:
<div ng-controller="dialogWindows">
<div ng-repeat="dialog in dialogWindows">
<div id="{{dialog.idName}}" class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader"><div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div></div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male">
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div>
Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
Any help will be appreciated.Thanks

Just single mistake;
set <div ng-repeat="input in dialog.inputs">
instead <div ng-repat="input in dialog.inputs">
As a side note:
use <pre>{{input|json}}</pre> as basic debugger to detect the issue
see Fiddle

In your nested loop you have to use ng-repeat, instead of ng-repat. If you would strip off example markup from unnecessary garbage before posting question, you would probably find typo yourself.
Then, you're missing ng-app="antroApp" directive in example.
Then, controller is dialogWindows, not antroApp:
antroApp.controller('dialogWindows', dialogWindows);

Missing closing div, typo as per Nenad answer, same naming for App and Controller, same naming for controller and scope variable... ouch my mind hurts, anyways, here is the result at jsbin
EDIT: (as per minitech request)
this an alternative version, example in jsbin has unnecessary code in question removed
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
</head>
<body ng-app="myApp"> <!-- *myApp is antroApp app -->
<div ng-controller="myCtrl"> <!-- *myCtrl is dialogWindows ctrl -->
<div ng-repeat="dialog in data"> <!-- data is dialogWindows scope var -->
<div class="bold abs">
<div class="questionContainer rel">
<div class="menu abs">
<ul class="menuList">
<li id="menuStart" class=" unbold">Start</li>
<li id="menuAbout" class=" unbold">About</li>
<li id="menuTech" class=" unbold">Technology</li>
<li id="menuContact" class=" unbold">Contact</li>
</ul>
</div>
<div class="questionHeader">
<div class="textGradient unbold tgHeaderXY">{{dialog.number}}.{{dialog.name}}</div>
</div>
<div class="empty"> </div>
<div class="questionBody">
<div ng-repeat="input in dialog.inputs">
<input type="radio" id="radio1" name="sex" value="male" />
<label for="radio1" class="answer abs {{input.a}}">{{input.answer}}</label>
</div>
</div> Next <i class="icon-arrow-right icon-white"></i>
<i class="icon-pencil tgHeaderIcon icon-3x abs"></i>
</div><!--/questionContainer--> <!-- *missing div -->
</div><!--/pigmentation-->
</div><!--/ng-repeat-->
</div><!--/ng-controller-->
<script>
var App = angular.module('myApp', []); //*myApp is in use now
App.controller('myCtrl', ['$scope', //*myCtrl is in use now
function ($scope) {
$scope.data = [{
id: 0,
idName: "pigmentation",
number: "1",
name: "Pigmentation",
answer1: "Clear complexion",
answer2: "Semi-swarthy complexion",
answer3: "Swarthy complexion",
answer4: "",
answer5: "",
answer6: "",
inputs: [{
id: 0,
a: "a1",
answer: "a"
}, {
id: 1,
a: "a2",
answer: "b"
}]
}];
}]);
</script>
</body>
</html>