I'm using Angular and trying to create nested ng-repeats. I've referred to the ng-repeat examples on the Angular site here here. But when I use the code below, the <ul> tag repeats but the <li> tag is blank. Any suggestions on how to do this correctly?
(EDIT: Updated array to address comment)
Array:
vm.projects = [
{"$id": "1234",
"people": {
"-K-v76MWDTIQqnR2w10r": {
"name": "John Doe",
"city": "New York",
"company": "Acme, Inc."
},
"-K-q7HmGUduAf5JkSGDY": {
"name": "Jane Smith",
"city": "Chicago",
"company": "ABC, Inc."
}
}
},
{
"$id": "2345",
"people": {
"-K-qq6Pcd0v1wggmALcZ": {
"name": "David Jones",
"city": "London",
"company": "Stardust, LLC"
}
}
}
]
HTML
<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
<li ng-repeat="name in vm.projects.people.name track by projects.$id">{{project.person.name}}
</li>
</ul>
Here is what actually displays:
ID: 1234
ID: 2345
You can use parent ul project object in li like below:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example85-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>
</head>
<body ng-app="initExample">
<script>
angular.module('initExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.projects = [{"$id":"1234","people":{"-K-v76MWDTIQqnR2w10r":{"name":"John Doe","city":"New York","company":"Acme, Inc."},"-K-q7HmGUduAf5JkSGDY":{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}}},{"$id":"2345","people":{"-K-qq6Pcd0v1wggmALcZ":{"name":"David Jones","city":"London","company":"Stardust, LLC"}}}];
}]);
</script>
<div ng-controller="ExampleController">
<ul ng-repeat="project in projects" >ID: {{project.$id}}
<li ng-repeat="(id, person) in project.people">{{person.name}}
</li>
</ul>
</div>
</body>
</html>
You want to do something like (in your inner ng-repeat):
name in project.people
Instead of
name in vm.projects.people.name track by projects.$id
(If you post a valid JSON sample I can give you the exact thing to put.)
you can use like this
<ul>
<li ng-repeat="c in countries">
<label>
<input type="checkbox" ng-model="CountryName" />
{{c.CountryName}}
</label>
<ul ng-repeat="s in cities" ng-if="c.CountryId==s.CountryId">
<li>
<label>
<input type="checkbox" ng-model="CityName" />
{{s.CityName}}
</label>
</li>
</ul>
</li>
</ul>
refere below url http://www.codeproject.com/Tips/987499/Nested-Ng-Repeat-on-AngularJS
First it's important to point out that there were some significant syntax issues in your JSON which was breaking your ng-repeats.
You must refer to the object inside your first ng-repeat (the one you declare in the ul tag) to make sure the scope is mapped properly for the li tag scopes. In my example "someKey" refers to the alpha numeric strings you had. You will need to make sure these are the same in each son structure in order to refer to them properly. This is why I changed the name to "someKey". My suggestion is to use a key named "data" and then use "id" to keep track of the name of the data you are using for your key. Example:
{"$id": "1234",
"people": {
id: "-K-v76MWDTIQqnR2w10r",
data: {
"name": "John Doe",
"city": "New York",
"company": "Acme, Inc."
},
Here's the code:
$scope.vm = {};
$scope.vm.projects = [
{$id:"1234",
"people":[
{"someKey":
{"name":"John Doe","city":"New York","company":"Acme, Inc."}
},
{"someKey":
{"name":"Jane Smith","city":"Chicago","company":"ABC, Inc."}
}]
},
{$id:"2345",
"people":[
{"someKey":
{"name":"David Jones","city":"London","company":"Stardust, LLC"}
}]
}
]
<div ng-controller="MyCtrl">
Hello, {{name}}!
<ul ng-repeat="project in vm.projects" >ID: {{project.$id}}
<li ng-repeat="people in project.people">{{people.someKey.name}}
</li>
</ul>
</div>
Related
I have an array like this
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
here my view code
<div ng-repeat="m in mentors">
<div ng-if="m.status == '1'">
<div>
{{m.name}}
</div>
</div>
</div>
and my result is :
Nathan and Chris
what can I do to just make it show Nathan or Chris
it must only show one result only
p/s: already try ng-show="$last" it did not work since Brian status is '0'
You can filter the array on statuses and then just take the first by checking against $index
angular.module('app', []).controller('myCtrl',function($scope){
$scope.mentors = [ {"name":"Jonathan", "status":0},
{"name": "Nathan","status":1},
{"name": "Chris","status":1},
{"name": "Brian","status":0}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<body ng-app="app">
<div ng-controller="myCtrl">
<div ng-repeat="m in mentors | filter : {status: 1}">
<div ng-if="$index == 0">
<div>
{{m.name}}
</div>
</div>
</div>
</div>
</body>
</html>
You could use the limitTo and filter
<div ng-repeat="m in mentors | filter: { status : '1'}| limitTo : 1">
<div>
{{m.name}}
</div>
</div>
There is no reason to use ng-repeat if you only need to display 1 item.
You should handle this in your controller. Create a new variable that will hold the mentor that you want to show.
To find Nathan, you can use Array#find(). It will return the first item that matches the condition status === 1
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.mentors = [{
"name": "Jonathan",
"status": 0
},
{
"name": "Nathan",
"status": 1
},
{
"name": "Chris",
"status": 1
},
{
"name": "Brian",
"status": 0
}
];
$scope.mentor = $scope.mentors.find(m => m.status === 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{mentor.name}}</h1>
</div>
i have following record i want filter in ng-repeat by name i enter but its but not working please help me this
ng-repeat="contact in vm.contacts | filter: {name: vm.chatSearch}
"userlist": [
{
"_id": "59edd7c5ff809c1c4c7a43c2",
"updatedDatetime": "2017-10-23T11:51:33.106Z",
"createdDatetime": "2017-10-23T11:51:33.106Z",
"user_id": {
"_id": "59f07d5c935f27764c8d1090",
"name": "james"
},
"__v": 0
}
]
Try:
ng-repeat="contact in vm.contacts | filter: {user_id: {name: vm.chatSearch}}"
Demo plunker
Example:
<ul>
<li ng-repeat="contact in contacts | filter: {user_id: {name: chatSearch}}">
{{contact.name}} user_id: {{contact.user_id.name}}
</li>
</ul>
My following example may helps you
HTML
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<input ng-model="results.year">
<div ng-repeat="subject in results.subjects | filter:{grade:'A'}">
<input ng-model="subject.title" />
</div>
</body>
</html>
JS
function MyCtrl($scope) {
$scope.results = {
year:2013,
subjects:[
{title:'English',grade:'A'},
{title:'Maths',grade:'A'},
{title:'Science',grade:'B'},
{title:'Geography',grade:'C'}
]
};
}
Thanks,
Arun
You need something like this,
<li ng-repeat="user in vm.contacts | filter: {user_id: {name: searchterm}}"><span>{{user.user_id.name}}</span></li>
DEMO
var app = angular.module('myapp',[]);
app.controller('personController',function(){
var vm = this;
vm.contacts = [
{
"_id": "59edd7c5ff809c1c4c7a43c2",
"updatedDatetime": "2017-10-23T11:51:33.106Z",
"createdDatetime": "2017-10-23T11:51:33.106Z",
"user_id": {
"_id": "59f07d5c935f27764c8d1090",
"name": "james"
},
"__v": 0
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController as vm">
<input ng-model="searchterm"/>
<ul>
<li ng-repeat="user in vm.contacts | filter: {user_id: {name: searchterm}}"><span>{{user.user_id.name}}</span></li>
</ul>
</div>
ng-repeat is not listing different json values, instead it just displays the entire json file content in single list item
codepen
html:
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
</ul>
</div>
</div>
All the json file content is in here. I just need the specific data to display on each list item.
For Example,
Student One
Student Two
Student Three
Student Four
Student Five
See image for issue
JS
<script>
var app = angular.module('myApp', []);
//$.ajax({url: app, crossDomain:true, dataType: 'json', type: 'GET'})
app.controller('myCtrl', function($scope, $http){
$http.get("student.json")
// $http.get("stud.json")
.then(function(response) {
$scope.student = response.data;
});
});
</script>
json
[
{
"name" : "Student One"
},
{
"name" : "Student Two"
},
{
"name" : "Student Three"
},
{
"name" : "Student Four"
},
{
"name" : "Student Five"
}
]
Your ng-repeat should be look like, to be more on that, you are missing the proper syntax and its ng-repeat not ng-reapeat
<li class="list-group-item" ng-repeat="stu in student" >
{{stu.name}}
</li>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.student =
[
{
"name": "Student One"
},
{
"name": "Student Two"
},
{
"name": "Student Three"
},
{
"name": "Student Four"
},
{
"name": "Student Five"
}
];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
<div class="container">
<h2>Basic List</h2>
<ul class="list-group">
<li ng-repeat="stu in student" >
{{stu.name}}
</li>
</ul>
</div>
</div>
</body>
I figured it out!
I fixed the syntax of the parameter in ng-repeat attribute.
So instead of the previous :
<ul class="list-group">
<li class="list-group-item" ng-reapeat="student">
{{student}}
</li>
Before
it should be like this :
<ul class="list-group" >
<li class="list-group-item" ng-repeat="student in student" >
{{student.name}}
</li>
Result:
After
I have json output from api wants to display in ng-repeat on div
[
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
]
I want to display like this
<div class="list-row">
<div class="list-cell">abc</div>
<div class="list-cell">Jaakr1</div>
<div class="list-cell">poonam.kumar#abc.com</div>
<div class="list-cell">Developer 1</div>
</div>
<div class="list-row">
<div class="list-cell"></div>
<div class="list-cell">janam1</div>
<div class="list-cell">raja#abc.com</div>
<div class="list-cell">Developer 2</div>
</div>
Please provide the solution
Apart from all the answers posted above i would like to post mine that will handle multiple JSON objects inside the array. Since you have only one object right now one of the above solution may work but when you have more that one object inside the array then this will work great.
HTML
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="(key1, value1) in data">
<div class="list-row" ng-repeat="(key2, value2) in data[key1].namesList">
<div class="list-cell"><span ng-if='$index == 0'>{{data[key1].companyName}}</span> </div>
<div class="list-cell">{{value2.name}}</div>
<div class="list-cell">{{value2.email}}</div>
<div class="list-cell">{{value2.job}}</div>
</div>
</div>
</div>
Controller
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.data = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
},
{
"companyName": "abc2",
"namesList": [
{
"name": "Jaakr12",
"email": "poonam.kumar#abc.com2",
"job": "Developer 12"
},
{
"name": "janam12",
"email": "raja#abc.com2",
"job": "Developer 22"
}
]
}
];
})
For more generalization i have added two JSON objects inside the array and the output is exactly what you expected. To play around i have added the JSFIDDLE
<div *ngFor="let person of jsonObj.namesList">
<div class="list-cell"></div>
<div class="list-cell">{{ person.name }}</div>
<div class="list-cell">{{ person.email }}</div>
<div class="list-cell">{{ person.job}}</div>
</div>
You can do this,
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
DEMO
var myApp = angular.module('ReqWebApp', [])
myApp.controller('ReqAppController', function ReqAppController($scope) {
$scope.myArray = [
{
"companyName": "abc",
"namesList": [
{
"name": "Jaakr1",
"email": "poonam.kumar#abc.com",
"job": "Developer 1"
},
{
"name": "janam1",
"email": "raja#abc.com",
"job": "Developer 2"
}
]
}
];
});
<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
<meta charset="UTF-8">
<title>New Request</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
<div ng-repeat="item in myArray[0].namesList" class="list-row">
<div class="list-cell">{{item.name}}</div>
<div class="list-cell">{{item.email}}</div>
<div class="list-cell">{{item.job}}</div>
</div>
</body>
</html>
You can do something like this:
<div class="list-row" ng-repeat="nameObj in data.namesList">
<div class="list-cell">{{data.companyName}}</div>
<div class="list-cell">{{nameObj.name}}</div>
<div class="list-cell">{{nameObj.email}}</div>
<div class="list-cell"{{nameObj.job}}</div>
</div>
What I am trying to do is sort some data by field value.
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
in the html file i have select box and 3 options called coffee, tea and ice coffee,
if i select coffee should be sorted like this
$scope.testarr = [{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"2","name":"tea"},
{"id":"4","name":"ice coffee"}]
if i select tea should be sorted like this
$scope.testarr = [
{"id":"2","name":"tea"},
{"id":"1","name":"coffee"},
{"id":"3","name":"coffee"},
{"id":"4","name":"ice coffee"}]
i'm trying to use order by but somehow it does't work
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
It does seem to work. Ensure that your ng-repeat has access to $scope.testarr (i.e. it is being declared on your $scope in the correct controller or directive.
angular.module('app', [])
.controller('ctrl', function($scope) {
$scope.testarr = [{
"id": "1",
"name": "coffee"
}, {
"id": "2",
"name": "tea"
}, {
"id": "3",
"name": "coffee"
}, {
"id": "4",
"name": "ice coffee"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<div ng-repeat="item in testarr | orderBy: 'name'">
{{item.id}} ------ {{item.name}}
</div>
</div>
</div>