I have a array like this:
$scope.sortable = [["inProgressCounter","31"],["approvedCounter","3"],["pendingCounter","35"],["rejectedCounter","0"]]
I need to show them with ng-repeat my code is:
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
but it gives me nothing.
so I also tried print the data out in html like this:
{{sortable}}
<ul>
<li ng-repeat="info in sortable">{{info[0]}}{{info[1]}}</li>
</ul>
it works,and shows me the data.
Here is a plunker of this working. This was all using the code you provided.
There must be something wrong with your controller, or you arent even assigning a controller to anything.
code
http://plnkr.co/edit/4pEsP6mr0tA6Toe9coTG?p=preview
Related
This is my array which have property message which have another array.
chat = [{id:1, toUser:10, fromUser:11, seen:null, name:'Filip', messages:[{message:'Hello'},{message:'Hello again'}]}];
This is my HTML
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1> //this works fine
<p>{{c.messages.message}}</p> //There I cant get anything. If I set c.messages[0].message I only get first result
</div>
Use a second nested ngFor. Something like:
<div *ngFor="let c of chat">
<h1>{{c.name}}</h1>
<p *ngFor="let item of c.messages">{{item.message}}</p>
</div>
I am developing a Web application using AngularJS. I am having a problem to use for loop in the html in AngularJS way. See my scenario below.
In AngularJS, we normally loop ng-repeat like this
<ul>
<li ng-repeat="item in items">{{ item.name }}</li>
</ul>
But what I want to do is I want to set the start index for loop. In JavaScript, it is going to look like this.
for(var i=3;i<items.length;i++)
{
//do something
}
As you can see, I set the start index(i) to 3. But how can I embed the code in html in AngularJS way? What I want is something like setting start index to ng-repeat. Is it possible to do that?
If you use JavaScript's Array.slice function, you won't need to invoke Angular functions.
<ul>
<li ng-repeat="item in items.slice(3)">{{ item.name }}</li>
</ul>
ng-repeat="item in myItems" ng-if="$index>=3"
<ul>
<li data-ng-repeat="item in items | limitTo: (startIndex - items.length)">
</ul
This will work.
<li ng-repeat="item in data" ng-click="myFunc('{{ item.name }}')">
I can't seem to get ng-click to pass the varible value of item.name. It actually sends:
{{ item.name }}
An example in Plunker:
http://plnkr.co/edit/dq5KA3?p=preview
In the console it looks ok, but doesn't actually work:
ng-click is actually an angularjsexpression, so you should be able to set it as ng-click='myFunc(item.name)'. This will pass the actual value of item.name rather than trying to pass the string value of the raw text as your current implementation is doing.
Use:
<li ng-repeat="item in data" ng-click="myFunc(item.name)">{{item.name}}
</li>
Because item is an object.
Explanation about the results in the console, in your scenario:
Always: {{item.name}} It will print the value, this is why you see in the console:
<li ng-repeat="item in data" ng-click="myFunc('Apple')" class="ng-binding ng-scope">Apple
</li>
Because you have in your page:
<li ng-repeat="item in data" ng-click="myFunc('{{ item.name }}')">{{item.name}}
</li>
ng-click is actually an angular directive not an expression, you need to give brackets when you are passing value to the expression but you do not need to use brackets when you pass values to directive.
I am having an array in controller as follows
function FooController($scope) {
$scope.items = ["a","b","c"];
}
I used ng-repeat to show the data in items,
<div ng-app>
<div ng-controller="FooController">
<ul ng-repeat="item in items">
<li>{{item}}</li>
</ul>
</div>
</div>
I got the result as a,b,c order. I want to show it in reverse order. that means c,b,a without changing its order in the controller or without creating a filter. How to do that?
Check this link
I faced the same problem, but with an array of objects. This quick solution worked for me, but using the filter is still the best practice.
<li data-ng-repeat="item in data.slice().reverse()">
...
</li>
http://bootply.com/SgVBZvZ708
In order to avoid the writting of a custom filter, I suggest you to use this syntax :
<ul ng-repeat="item in items | orderBy:'-toString()'">
The documentation assume you sort an array of Objects but in your case there are just plain strings.
Wrap the strings in objects and use orderBy or create a new filter:
angular.module("app",[])
.filter("reverse", function(){
return function(items){
return items.slice().reverse(); // Create a copy of the array and reverse the order of the items
};
});
And use it like this:
<ul ng-repeat="item in items|reverse">
Updated fiddle (I've also updated the ng-app directive so it's passed the "app" module.)
I have a JSON object in $scope called data. The object has a member called items which may either be an Object or Array of Objects. For this reason I can't use ng-repeat:
<ul>
<li ng-repeat="item in data.items">
<item data="item"></item>
</li>
</ul>
...because if data.items is an object it creates an <item> directive for each member in data.items. However things work fine if data.items is an array. I thought I could do something like:
<span ng-if="angular.isObject(data.items)">
<span ng-if="angular.isDefined(data.items)">
<item data="data.item"></item>
</span>
</span>
But this doesn't work, I guess because I need the argument to isObject and isDefined to be an expression that can be resolved, but wrapping the argument in {{}}} just results in a syntax error.
I then thought I could create a directive that would inspect items and modify the template element in the compile function, however this requires access to data on $scope, which compile functions don't have. I think the linking function would be too late to modify the template?
You can do something like this:
<ul ng-if="data.items.length>0">
<li ng-repeat="item in data.items">
<item data="item"></item>
</li>
</ul>
<span ng-if="data.items && !(data.items.length>0)">
<item data="data.items"></item>
</span>