Hi I'm a bit new to angular and trying to figure out how I could access a json key and iterate and print the values that are contained in an array. In my case below I'm trying to print the names along with their roles.
angular.module('employeeEarnestApp')
.controller('MainCtrl', function ($scope) {
$scope.employees = [ { id: 1, name: 'Alex', roles: ['admin','user','CEO'] },
{ id: 2, name: 'John', roles: ['developer','marketing'] },
{ id: 3, name: 'Kim', roles: ['sales','developer','CTO'] } ];
});
How could I use ng-repeat to print out the roles in the array? I'd imagine it might be something like this below?
<div class="container">
<h2>My Employees</h2>
<p class="form-group" ng-repeat="employee in employees">
{{employee.id}} - {{employee.name}}
<p class="form-group" ng-repeat="roles in {{employees.roles}}">
{{roles}}
</p>
</p>
</div>
Remove {{}} in ng-repeat, since ng-repeat automatically evaluates the expression, no need for {{}}.
<div class="container">
<h2>My Employees</h2>
<p class="form-group" ng-repeat="employee in employees">
{{employee.id}} - {{employee.name}}
<p class="form-group" ng-repeat="role in employee.roles">
{{role}}
</p>
</p>
</div>
See, http://jsbin.com/hasuyewazi/1/edit
Related
I'm loading data from a database and save it to an array as follows:
$scope.allGroups = [{id: 1, groupName: group1}, {id: 2, groupName: group2}, ..]
In my view, I'm trying to select multiple group names as follows:
<div
class="drag-container avaliable-groups-connect groups-container schedule-container"
>
<div class="group" ng-repeat="m in allGroups">
<input type="checkbox" ng-model="m.selected" />
<span>{{ m.groupName }}</span>
</div>
</div>
I want to save selected items (m.selected) to an array one-by-one and bind that array to ng-model="schedule.selectedGroups"
How can I perform that? Thank you..
<div class="group" ng-repeat="m in allGroups" ng-init="m.selected = false">
<input type="checkbox" ng-model="m.selected" />
<span>{{ m.groupName }}</span>
</div>
Now your checkbox ng-model with modify the variable to true or false and in your js code
you can do like below.
$scope.schedule.selectedGroups = $scope.allGroups.filter(function (data) {
return data.selected === true;
});
If I have, for example, the array:
$scope.users = [
John: {
age: 18,
genre: 'male',
type: 'admin'
},
Paul: {
age: 22,
genre: 'male',
type: 'admin'
}
];
How can I get the users names when I iterate with ngRepeat?
<li ng-repeat="user in users">
{{ }} <!-- Name Here -->
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
Thanks!
1) You have error in your code: your array should be an object, since it has keys John, Paul ...
2) In ngRepeat you can iterate over object properties like (key, value) in obj
Here is working example:
angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope ) {
var ctrl = this;
ctrl.users = {
John: {
age: 18,
genre: 'male',
type: 'admin'
},
Paul: {
age: 22,
genre: 'male',
type: 'admin'
}
};
}]);
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl as $ctrl">
<ul>
<li ng-repeat="(key, user) in $ctrl.users track by $index">
{{ key }}
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
</ul>
</div>
</div>
First of all arrays can't have custom keys. So I suppose you are using object $scope.users.
And for answer, you can do this: ng-repeat="(name, user) in users"
https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties
You can use Object.keys(users) to get an array with the values ['Paul','John']
<li ng-repeat="user in users track by $index">
{{ Object.keys(users)[$index] }}
{{ user.age }} <br>
{{ user.genre }} <br>
{{ user.type }}
</li>
this isn't tested but I think it should be along the lines of what you need.
I'm struggling with angularjs! Here's the problem. I've a list of employees from different company to show. Data are like these:
[
{
name : "company1",
employees : [
{ name : "emp1"},
{...}
]
},
{ .. }
]
I show them using two ng-repeat:
<div ng-repeat="company in companies ">
<div class="header">{{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search">
{{employee.name}}
</div>
</div>
Here we are, I want to avoid, during filtering the headers of company with no employees.
Hope you guys are smarter than me :)
<div ng-repeat="company in companies ">
<div class="header" ng-show="results.length>0"> {{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:search as results">
{{employee.name}}
</div>
Explaination: after filtering your filtered data will be stored in ressults , which we can use to decide whether to show company name or not
Try this, I also attached demo.
ng-show="(company.employees | filter:search).length"
var app = angular.module('app', []);
app.controller('myctrl', function() {
var vm = this;
vm.companies = [{
name: "company1",
employees: [{
name: "emp1"
}, {
name: "poiuy"
}, {
name: "asdf"
}]
}, {
name: "company2",
employees: [{
name: "ghj"
}, {
name: "jkl"
}, {
name: "ooo"
}]
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="myctrl as ct">
<input ng-model="ct.search">
<div ng-repeat="company in ct.companies ">
<div class="header" ng-show="(company.employees | filter:ct.search).length">{{company.name}}</div>
<div ng-repeat="employee in company.employees | filter:ct.search">
{{employee.name}}
</div>
</div>
</div>
</body>
I need help to use ng-model directive with ui-gmap-marker. My example app.js is:
// DevicesController
$scope.devices = {
id: 1,
center: { latitude: X, longitude Y },
options: {
show: true,
name: 'device 1',
radius: 100
}
(...)
}
My index.html is:
<ul ng-controller="DevicesController">
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas" ng-controller="DevicesController">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
(...)
How can I use ng-model? Doesn't work because I'm using the same controller e two different places? I want that the user be able to click in input checkbox and the marker appear/disappear.
I'd suggest simply wrap both the div in same controller rather than providing a separate controller to them.
Markup
<div ng-controller="DevicesController">
<ul>
<li ng-repeat="d in devices">
<input type="checkbox" ng-model="d.options.show">
<span>{{ d.options.name }}</span>
</li>
</ul>
(...)
<div id="map_canvas">
<ui-gmap-marker
ng-repeat="d in devicesMarkers track by d.id"
idkey="d.id"
coords="d.center"
ng-model="d.options.show">
</ui-gmap-marker>
</div>
(...)
</div>
Else maintain the data in share able service that will provide the data to both controller and will make sure, data should be updated in both places.
I have an array of restaurant objects and I want to list them by grouping their cities
My object is like;
restaurant = {
id: 'id',
name: 'name',
city: 'city'
}
This HTML Markup can give some info about what I want to do.
<div ng-repeat="restaurant in restaurant | filter: ???">
<div class="header">
<h1 ng-bind="restaurant.city"></h1>
<a>Select All</a>
</div>
<div class="clearfix" ng-repeat="???">
<input type="checkbox" id="restaurant.id" />
<label ng-bind="restaurant.name"></label>
</div>
</div>
Can I do it with one single array or do i need to create seperate city and restaurant arrays to do it?
If you want to group restaurants by city, you can use groupBy of angular.filter module.
Just add the JS file from here: http://www.cdnjs.com/libraries/angular-filter to your project and use following code.
var myApp = angular.module('myApp',['angular.filter']);
function MyCtrl($scope) {
$scope.restaurants = [
{id: 1, name: 'RestA', city: 'CityA'},
{id: 2, name: 'RestB', city: 'CityA'},
{id: 3, name: 'RestC', city: 'CityC'},
{id: 4, name: 'RestD', city: 'CityD'}
];
}
<div ng-controller="MyCtrl">
<ul ng-repeat="(key, value) in restaurants | groupBy: 'city'">
<b>{{ key }}</b>
<li ng-repeat="restaurant in value">
<i>restaurant: {{ restaurant.name }} </i>
</li>
</ul>
</div>
I've created JSFiddle for you with working example.