I have a JSON
{"uuid":"5634","day":"three","one":{},"two":{},"three":{"people":[{"name":"sam","count":"2"},{"name":"das","count":"5"},{"name":"smith","count":"12"},]}}
I want to repeat only the data from the key "three". Is it possible to map that with the value "day"?
In your Controller, derive a new $scope variable for the data you wish to use in your view:
var data = {"uuid":"5634","day":"three","one":{},"two":{},"three":{"people":[{"name":"sam","count":"2"},{"name":"das","count":"5"},{"name":"smith","count":"12"},]}};
$scope.dayData = data[data.day];
Then use that variable in your view by amending the ng-repeat as follows:
<div ng-repeat="person in dayData.people">
<h1>{{ person.name }}</h1>
<p>Count : {{ person.count }}</p>
</div>
Example Plunk
Related
I have an object called "profile" that includes a handful of other objects -- each one I want to display the label followed by the display_value:
In my HTML, I know I need to ng-repeat through the object profile, but have not been able to get the desired display of label: display_value (i.e. Employment Start Date: 11/20/2019). What is the correct syntax to loop through c.profile and display label followed by display_value? Do I need two ng-repeats in this instance?
<div ng-repeat="item in c.profile track by $index">
{{item.?}}: {{item.?}}
</div>
<div ng-repeat="item in c.profile track by $index">
{{item.label}}: {{item.display_value}}
</div>
make sure your data is what you expect it to be.
Use ng-repeat="(key, value) in myObj":
<div ng-repeat="(category, valueObj) in c.profile">
<h2>{{category}}</h2>
<div ng-repeat="(key, value) in valueObj">
{{key}} : {{value}}
</div>
</div>
For more information, see
AngularJS ng-repeat Directive API Reference - Iterating over object properties
Here is the plunker link. I am trying to fetch the json data using Angularjs where data is like object of objects of array.
Plunker link with example
You need to iterate it over key and value in ng-repeat. check plunker
like
<div ng-repeat="(key, value) in questions">
{{key}}
<div ng-repeat="item in value">
version : {{item.version}}
</div>
</div>
your div tag is not closed properly....
<div ng-repeat="ques in questions">
<p>{{ques[0].version}}</p>
</div>
your ng-repeat div tag was closed before your tag.
Fixed Plunker Link
Plunker: for each sub version
Some code modifications as components properties are dynamic. hence, iterate it dynamic :
$scope.components = response.data.components;
$scope.questions = [];
for(var i in Object.keys($scope.components)) {
for(var j in $scope.components[Object.keys($scope.components)[i]]) {
$scope.questions.push($scope.components[Object.keys($scope.components)[i]][j]);
}
}
console.log($scope.questions);
});
updated Plnkr : https://plnkr.co/edit/PuvO6PrifWa5WtpeQrvY?p=preview
I have a map object in my angular controller like this,
var map = new Map();
map.set(1,'a');
map.set(2,'b');
map.set(3,'c');
map.set(4,'d');
$scope.map = map;
How do I display its content in my html file using ng-repeat?
I tried the following, they didn't work
<div ng-repeat ="m in map">
{{m}}
</div>
<div ng-repeat ="(key, value) in map">
{{key}}
{{value}}
</div>
You don't as ng-repeat iterates over an array of objects. But you can use something like Agular Filter GroupBy for that. Or change structure of your array to [{key: 'key', value: 'value'},..] and change ng-repeat to
<div ng-repeat ="item in map">
{{item.key}}
{{item.value}}
</div>
I want to show for every item different description.
This is the controller:
todoApp.controller('todos',function($scope,todoFactory){
todoFactory.getTodos().success(function (data) {
courses = x2js.xml_str2json(data);
$scope.todos = courses.rss.channel.item;
for(var i = 0 ; i < $scope.todos.length ; i++){
item = $scope.todos[i];
console.log(item.description);
$scope.message = item.description;
}
});
this is the html:
<div ng-controller="todos" class="list" style="padding-top: 8%">
<div class="list card" ng-repeat="todo in todos | filter:search" >
<div class="item item-avatar" ng-click="openLink(todo.link)" >
<img src="Bla-Bla-Logo-1.png">
<h2>{{todo.title}}</h2>
<p>{{todo.pubDate | limitTo:25 }}</p>
</div>
<div class="item item-body">
<p ng-bind-html="message"></p>
<p>
1 Like
5 Comments
</p>
</div>
</div>
<!--end list card-->
</div>
<!--end todos-->
Just to explain the code I get xml and convert into json so todos is array of objects.
Message is entering every object and get the description (but in the description has tags so i use ng-bind-html directive to show it properly).
I understand that $scope.message will hold just the last description. How to make it to belong in the ng-repeat so I can get different description for different item?
Thanks.
replace
<p ng-bind-html="message"></p>
with
<p ng-bind-html="todo.description"></p>
please provide the data which is you want to displayed repeatedly.
How data is represented.You are getting last one because it is overriding.
The "ngBind" attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
Typically, you don't use "ngBind" directly, but instead you use the double curly markup like {{ expression }} which is similar but less verbose.
i don't no how do i explain my question,
ok let me try,
How to pass value from another div with same controller name?
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = filterBy.value">{{vals.title}}</li>
</ul>
</div>
From the second div when i filter i works fine, but the same filter i've applied on the top with same controller but it doesn't work.
DEMO PLUNKER
The problem is that under each ng-controller it's creating a new $scope. This means they don't share $scope at all, and there are two different controller instances as well.
So, to communicate between two controllers, the common practice is to use a service.
I've updated your plunk with a very basic example.
The idea is that you create a service like:
app.value('sharedData', { filteredBy: true});
Then inject it into your controller and put it on your scope like so:
app.controller('MyCtrl', function($scope, sharedData) {
$scope.sharedData = sharedData;
});
Then after that you'd use it as your ng-model value and your filter:
<select ng-model="sharedData.filteredBy" ng-options="x.value as x.title for x in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: { completed: sharedData.filteredBy }">{{vals.title}}</li>
</ul>
From there it will work because both controllers (and $scopes) now have an instance of the same object... your sharedData service.
You need to specify
ng-controller="myCtrl"
where the ng-app is and remove all the other ng-controller statements. This is because whenever you are trying to do ng-controller in individual div it is creating a local scope for that particular div and then any change in the dropdown is refreshing that local scope.
Code:
<body ng-app="myApp" ng-controller="myCtrl">
<div >
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div>
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = $parent.filterBy.value">{{vals.title}}</li>
</ul>
</div>
</body>
Controller Code change donw:
$rootScope.filterBy = $scope.filter_preferences[1];
Earlier it was:
$scope.filterBy = $scope.filter_preferences[1];
UPDATE:
You can have the filterBy variable on the rootScope rather than the local scope. So that any changes to the local scope will be done at the root level and changes will reflect everywhere
Tried this in your plunker and it is working.
You could not mention controller twice under ng-app