I need to display this values of an property inside an json object with ng-repeat.
"id_products" : [5730827476402176: 2, 5173045979250688: 1, 5735995932672000: 2]
I am using ng-repeat on <tr> inside a table. If the property is a simple array I can display without problems but as the object showed above I am just getting [].
This is a snippet of my code:
<tbody>
<tr class="animate-repeat" ng-repeat="item in sales|orderBy: 'name'|filter: filter">
<th> {{item.id_products}}</th>
.....
I tried nested ng-repeats but I get the same result.
What is the right way to display this object?
Thanks.
see the ng-repeat documentation - "The built-in filters orderBy and filter do not work with objects, and will throw an error if used with one.
If you are hitting any of these limitations, the recommended workaround is to convert your object into an array that is sorted into the order that you prefer before providing it to ngRepeat"
https://docs.angularjs.org/api/ng/directive/ngRepeat
This object data structure is not javascript or json valid.
Related
i'm new with laravel and angular things. so i try to get data from 3 table and create 3 different variable with model in each variable and in angular controller i got data result as $scope.document_url. first this is my 3 object data :
and i want to know is it possible to get all 3 object into 1 in just using 1 ng-repeat? this is what i do in my angular view :
<tr md-row md-auto-select ng-repeat="(key, value) in document_url[0]">
so i want just document_url not document_url[0] to get all array value in all object in 1 ng-repeat. thanks for helping me sorry bad english. if you dont understand my explanation i will try to explain more detail.
Could you not use two ng-repeats one inside the other?
<tr md-row md-auto-select ng-repeat="outerObj in main_array">
<span ng-repeat="innerObj in outerObj">{{outerObj.Id}} - {{innerObj.Id}}</span>
</tr>
Hope someone can help me out with this:
I'm working with knockout and have the following json array:
[[174302,"BUSINESS - APPLICATION TO CONDUCT A BUSINESS FROM HOME.pdf",".pdf","DK89639"],[120183,"Glovent-Brochure.pdf",".pdf","DK472894"]]
inside my "consumerData" variable.
As you can see there are 2 arrays with 4 elements inside each.
Here is how I am trying to access it:
<div data-bind="foreach: consumerData" style="margin-bottom:100px;">
<table>
<tr>
<td colspan="2">
<p style="font-size:larger; margin-bottom:5px;"><a data-bind="attr: { href: 'http://someaddress/address/'+consumerData[0]+''+consumerData[2]+'?key='+consumerData[3]+'' }"><div data-bind="text: consumerData[1]"></div></a></p>
</td></tr>
</table>
</div>
So this is looping twice which is correct but how do I access my data inside each array?
PLease help!
Thanks!
Regards
Francois
You can access unnamed data within a loop by accessing the $data object (instead of consumerData again), which represents the current context
See this fiddle:
https://jsfiddle.net/5c6y46bo/
Also, you don't need to put a div inside your link to hold the text of the current object, just put the text binding within the <a> element's binding alongside the attr binding.
I'm working with angular building a table of data which comes from a JSON API call. I'm having to use a nested ngRepeat however I'm seeing strange results where whole table rows are missing when the row has a couple empty strings.
I can reproduce with the following plunk.
http://plnkr.co/edit/VCzzzPzfgJ95HmC2f83P?p=preview
<script>
function MyController($scope){
$scope.test = {"rows":[
["one","two","three"],
["one","two","three"],
["one","","three"],
["one","",""],
["","two",""],
["","","three"],
["one","two","three"],
["one","two","three"],
]};};
</script>
<div ng-app ng-controller="MyController">
<table>
<tr ng-repeat="(key,ary) in test.rows">
<td>{{key}}</td>
<td ng-repeat="value in ary">{{value}}</td>
</tr>
</table>
</div>
Notice when an array has two empty strings the nested ngRepeat appears to fail.
Am I going mad? Is there an explaination to this?
Yes. You would need to use track by $index since you are repeating primitives, or convert it to array of objects. Reason is ng-repeat creates unique id $$hashkey (and attached to the repeated object as property) for each of the iterated values if it is an object (unless you specify something as track by).
In your case you have primitives so it cannot attach a property itself, so it tries to consider the values repeated as identifier and it finds duplicate when you have multiple empty strings iterated. You would see the same effect when you repeat array of objects with more than one of them is undefined or null as well..
So in this case you can use track by $index So repeated items will be tracked by its index.
<td ng-repeat="value in ary track by $index">{{value}}</td>
Demo
Much better option always is to convert it to array of objects so you don't run into these kinds of issues. WHen you have a property that uniquely identifies the repeated element (say id) you can set it as track by property. When you rebind the array (or refresh the array) angular uses the tracked identifier to determine if it needs to remove the element from DOM and recreate it or just refresh the element that already exists. Many cases where a list is refreshed with the list of items it is always desirable to use a track by with an identifier on the object repeated for performance effectiveness.
I'm stuck on something that I was expecting with AngularJS to work out of the box without any issues, and yet strangely enough...
I'm using a JSON service that returns data as a 2D array:
$scope.data= [
["val-11", "val-12", "val-13"],
["val-21", "val-22", "val-23"]
];
From this I'm trying to generate a table like this:
<table>
<tr ng-repeat="row in data">
<td ng-repeat="col in row">{{col}}</td>
</tr>
</table>
I don't understand why AngularJS doesn't handle such a basic scenario. I can get correct $index for the parent loop, if I need it, I can iterate through the values, but only with one loop like this "col in data[0]", but I cannot get any result trying to use the nested loop as shown above.
Am I doing something wrong? It just seems to be too basic not to work right away. Please somebody help me with this bizarre issue.
In Angular 1.0.x the ng-repeat directive had numerous bugs caused by trying to "guess" whether non-object values (i.e. strings or numbers) had been added, removed or moved.
The problem is that non-objects have no identity of their own, so it is impossible to track them accurately. This was problematic in a number of cases and also caused the ngRepeat code to be bloated with loads of workarounds and edge cases.
In 1.2 we improved the syntax for ng-repeat to allow the developer to specify for themselves exactly how to identify items in a collection. This is done by the "track by" keyword. One consequence of this is that we disallow items which have the same identifier.
By default ng-repeat will try to track by the value of the item. If you have repeated items such as the same object or identical strings or numbers then ng-repeat will complain and you will see the error in the console.
var TableCtrl = function($scope) {
$scope.data= [
["", "", "val-13"]
];
}
Here the first two items in the sub-array are the same "empty" string. See this fiddle: http://jsfiddle.net/tEU8r/
If you really do want to have repeated items in the collection then you need to provide a method for ng-repeat to distinguish them. The simplest and obvious approach is to track the items by their position in the collection. This is done by using "track by $index". Here is the same example but fixed in this way:
<table ng-controller="TableCtrl">
<tr ng-repeat="row in data">
<td ng-repeat="col in row track by $index">
{{$parent.$index}}-{{$index}} {{col}}
</td>
</tr>
</table>
http://jsfiddle.net/h44Z8/
So this is not a bug in AngularJS. But you are correct that people should be aware of this change when upgrading to 1.2
I reviewed the documentation
http://docs.angularjs.org/api/ng.filter:orderBy
but I am still a little confused so maybe the documentation could benefit from a really simple example as well as one that's more detailed.
What I have is:
<tr data-ng-repeat="row in grid.data">
In the row object there is a property row.num
If I want to order my ng-repeat then should what syntax should I use. Do I need to orderBy row.num or num. Do I need this in quotes?
You just need to state property of the loop variable.
<tr data-ng-repeat="row in grid.data | orderBy:'num'">