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>
Related
<tr ng-repeat="baseline in tower.baselines"></tr>
I have above HTML code where i have been using the ng-repeat to get to store the distorted array into an variable baseline....how can i access the same variable into controller?
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
Use the ng-repeat variable ($index) in the html and call a function on the controller
<div ng-repeat="baseline in tower.baselines">
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
</div>
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 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
Hi all I am returning a dictionary with a key and list of objects from my controller, I would like to bind this to the table or some other using ng-repeat, this is how it looks when returning data from controller
This is my trail
<tr ng-repeat="(key, value) in dic">
<td>{{value}}</td>
Which is displaying entire value
This is how finally I got it
<div ng-repeat="(key, value) in dic">
{{key}}
</div>
<div ng-repeat="v in value">
{{v.requiredcolumn}}
</div>
ng-repeat provides a mechanism for accessing the key and value of an object within the iterator. For an example of this, see the answer to this post: How can I iterate over the keys, value in ng-repeat in angular
I have an app that creates input elements dynamically when a user clicks a button.
It looks something like this:
[ input ] [+]
That input has an ng-model and I can use $compile when appending new inputs to have Angular treat them as if they were in the DOM at bootstrap time.
I can increment the ng-model value to say "item1", "item2" etc, but I don't like that.
I would like to know if there's a away to have an array that holds all values from all inputs.
Thanks.
You could try this:
HTML
<div ng-controller="myCtrl">
<button ng-click="addInputField()">add</button>
<ul>
<li ng-repeat="item in items">
<input type="text" id="item{{input.id}}" ng-model="item[$index]"/>
</li>
</ul>
data:
<div ng-repeat="item in items">
{{item}}
</div>
</div>
CONTROLLER
angular.module('app',[])
.controller('myCtrl',function($scope){
$scope.items = [];
$scope.addInputField = function(){
$scope.items.push({});
}
});
Here is the JSFiddle demo
'Items' is the data that binding to the input field list. You can maintain the view by updating the items array within scope and bind the elements of array to each input field view.
Hope this is helpful.