I have a controller that returns an array, I'm trying to display every element of that array as a list.
What I am attempting to do, which is not working:
<li ng-repeat="Name in names">
<a ng-controller="PostsCtrl" href="#">{{response.text}}</a>
</li>
response.text returns an array from the controller.
I am also wondering, what is the value of the ng-repeat attribute supposed to be, any unique string?
Thank you!
Define the array in your controller with the $scope variable:
app.controller('PostsCtrl', function($scope) {
$scope.response = { text: ['hello', 'world'] };
}
Then use ng-repeat on the VARIABLE, not the controller.
<div ng-controller="PostsCtrl">
<ul>
<li ng-repeat="name in response.text">{{name}}</li>
</ul>
</div>
The controller is only used to define what $scope variables you can use in that section, and is not used as a variable itself.
ngRepeat is basically just like a for loop. There is no default value, you just need to give it the data you want it to iterate through. So when you're doing a ng-repeat="name in names", it is similar to doing something like for(var name in names){} in plain javascript. For it to work properly you need to pass this data to the template via your $scope, as such:
var myApp = angular.module('myApp', []);
myApp.controller('PostsCtrl', ['$scope', function($scope){
// Here the array would be your response.text:
$scope.names = ['John', 'Jessie', 'Johanna', 'Joy', 'Mary', 'Peter', 'Sebastian', 'Erika', 'Patrick', 'Samantha'];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="PostsCtrl">
I have {{names.length}} friends. They are:
<ul>
<li ng-repeat="name in names">
[{{$index + 1}}] {{name}}.
</li>
</ul>
</div>
</div>
For further reading, please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
You probably have your controller on the wrong attribute there, unless you want a new controller for every item in the array.
The second issue, "response.text returns an array from the controller." So, is this the array you want to repeat?
<div ng-controller="PostsCtrl">
<li ng-repeat="item in response.text">
{{item}}
</li>
</div>
And then the third question, what is the value of the ng-repeat attribute supposed to be: it's supposed to be the value of any valid array on your $scope or viewModel. So, response.text would be a valid item to put on the ng-repeat since it is an array. As I have it above, you now have an item object for every item in reponse.text. If this is as far down as you want to go, you can simply print {{item}} -- if item has properties, you could do something like, for instance, {{item.someProperty}}
Related
I have data:
html:
<div ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in demo">
{{item.text}}
</li>
</ul>
</div>
js:
angular.module('MyApp', [])
.controller('MainCtrl', [function ($scope) {
$scope.demo=[
{"id":"ABC", "name":"ABC","text":"ABC"},
{"id":"PQR","name":"PQR","text":"PQR"},
{"id":"XYZ","name":"XYZ","text":"XYZ"}
];
}]);
I want to display the output like below on html view page:
ABC
PQR
MNO
instead of showing:
ABC
PQR
XYZ
i.e ex: I want to show the text value as: "MNO" instead of "XYZ" on displaying of view page, I don't want to change anything in the variable($scope.demoValues) using angularjs. I am not sure how to develop this. Please help me. Thanks.
Created Fiddle.
If you're simply looking to do a straight text replacement in the view when a particular value is encountered, you could use string.replace as follows:
<li ng-repeat="item in demo">
{{ item.text.replace('XYZ', 'MNO') }}
</li>
I have an issue where I'm trying to display an array in Angularjs using ng-repeat but its showing the entire json array and not only the text inside.
This is my array
$scope.problems = [
{
problem: "problem1",
works: [
"a0",
"a9"
]
}
]
And this is where I want to display it
<li ng-repeat="works in problems | filter: searchCard">{{works}}</li>
Now the {{works}} tag shows this in the live document:
{"problem":"probleem1","works":["a0","a9"]}
According to most tutorials and things i've seen its supposed to display the a0 and a9 not the entire json line.
My second question which might be completely different is, how can I display the text correctly but also hide all of them until a person has used the input to search the "works" input field.
when you have objects Array on ng-repeat you have to select that object params; in this sample our object params are "problem" and "works"
also in our object we have "string array" and string array not have params because that we use it directly in this sample {{work}} is object of string array.
<li ng-repeat="item in problems | filter: {problem: searchCard}">
{{item.problem}}
<ul>
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>
you can use the nested ng-repeats like #Maher mentioned. also, in order to hide data until searchCard is typed, you can use ng-if directive in nested ui.
<li ng-repeat="item in problems | filter: searchCard">
{{item.problem}}
<ul ng-if="searchCard">
<li ng-repeat="work in item.works">{{work}}</li>
</ul>
</li>
I have done a sample app with angular js and added a ng-repeat to loop my data but it's not looping it. I have shown my code below
<li style="background: white url('{{book.imgUrl}}') no-repeat" ng-repeat="book in books">
<div>
<h3>{{book.name}}</h3>
<p>{{book.price}}</p>
<ul>
<li>Rating: {{book.rating}}</li>
<li>Binding: {{book.binding}}</li>
<li>Publisher: {{book.publisher}}</li>
<li>Released: {{book.releaseDate}}</li>
</ul>
<p>{{book.details}}</p>
<button class="btn btn-info pull-right" ng-click="addToKart(book)">Add to Kart</button>
</div>
</li>
I have created a live demo of the problem here
In order to get value in view from controller , you have to bind that with $scope.
Your books variable isn't bind with scope
Convert this
var books=[
to this
$scope.books=[
or like this
$scope.books=books
DEMO
In your controller, instead of using
var books
use
$scope.books
You are close.
Instead of var book you need to glue book variable with $scope
Like
$scope.book=[{
// Rest of code
}]
Also first pass the dependency as string else you may see error during minification
app.controller('BookListCtrl',["$scope", function($scope) {
// Rest of code
}])
Try this
Use $scope.books instead of var books = [];
You should use $scope.books instead of var books.
DEMO
Assign your book in specific controller scope object parameter as per below
app.controller('BookListCtrl', function($scope) {
$scope.books=books;
})
I'm using angular-ui-tree.
The object I have in my treeview has a sort index. I am looking for a way to bind this sort index to the desIndex of the treeview scope, using something similar to this:
ui-tree-desIndex="node.sortIndex"
desIndex is the treeview node's index and node.sortIndex is my object's index.
I want it to sort my list by my objects' values, and when I move an object in the treeview the scope will update that object's index like this:
<div ui-tree="treeOptions" callbacks="treeOptions">
<ol ui-tree-nodes="" data-nodrop-enabled="true" ng-model="rootNodeLst" callbacks="treeOptions" id="tree-root">
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
The code above isn't working, how can I fix it?
Change this
<li ng-repeat="node ui-tree-desIndex="node.sortIndex" in rootNodeLst" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
To this
<li ng-repeat="node in rootNodeLst" ui-tree-desIndex="node.sortIndex" callbacks="treeOptions" ui-tree-node ng-include="'nodes_renderer.html'"></li>
For starters, to get your ng-repeat working.
Then, if ui-tree-desIndex does not get the value set, you can try:
ui-tree-desIndex="{{node.sortIndex}}" or ng-attr-ui-tree-desIndex="{{node.sortIndex}}"
See this JSFiddle.
Funny thing.
Found out that the way im building the treeview with the nested html modify my $index to show this sort number, so, anyway. thanks for your time and helå
The following code doesn't work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="selected = $index">...</li>
</ul>
When I click on one of the lis, the variable selected remains as -1. But the following does work -
<div ng-init="selected=-1">
<ul ng-repeat="x in arr">
<li ng-click="setTo($index)">...</li>
</ul>
$scope.setTo = function(index){selected = index;}
Why is that? Nothing functional seems to have changed.
ng-repeat directive creates it's own scope for each item in arr, so when expression selected = $index is executed, the new property selected is created on that scope, at the same time parent scope remains untouched.
Is why your selected property does not change in the first case.
Since the ngRepeat directive creates its own scope, you need to refer to $parent.selected in the first example:
<li ng-click="$parent.selected = $index">
http://plnkr.co/edit/9iUgp57KwvrlC3TDO3YC?p=preview