I am getting some server response data in two different JSON as:
userlist{id,name,type...}
and
tasklist{assign_to,tester,title,description...}
here, I need to show the task of the corresponding user.
so, I have nested the tasklist under the userlist using ng-repeat as:
<div ng-repeat="user in userList">
<table>
<tr><th>Name </th><td>{{user.name}}</td></tr>
<tr><th>Type </th><td>{{user.type}}</td></tr>
</table>
<div ng-repeat="task in taskList">
<div ng-if="task.assign_to==user.id || task.tester==user.id">
<table>
<tr><th>Title </th><td>{{task.title}}</td></tr>
<tr><th>Task Desc </th><td>{{task.description}}</td></tr>
</table>
</div>
</div>
</div>
but it's not working. As all the tasks are showing for every user.(Means ng-if is not working).
Any suggestion would be appreciated.
Angularjs code is case-sensitive. Please check variable name in scope. From the code you pasted above, the two lists should be :
userlist{id,name,type...}
and
tasklist{assign_to,tester,title,description...}
Use same in HTML. I think you are using taskList and userList (with capital L, use same name in JS and html)
All it was about the version actually. 1.0.7 doesn't support ng-if. Hence, 1.1.5 worked for me.
Related
I have a strange problem with showing some data using ng-repeat.
If my markup code is this:
<p ng-repeat="d in data"> {{d}} </p>
nothing shows up however if i do
<p> {{data}} </p>
the following is shown:
[203507,"Giannis","Antetokounmpo","Giannis Antetokounmpo","Antetokounmpo, Giannis","G. Antetokounmpo","1994-12-06T00:00:00","Greece","Greece","Greece","6-11","222",3,"34","Forward","Active",1610612749,"Bucks","MIL","bucks","Milwaukee","giannis_antetokounmpo",2013,2016,"N","Y"]
I checked the length of the array using {{data.length}} and it says 26 which is accurate. someone please explain?
my code to get data in scope is a json object:
$scope.data = info.resultSets[0].rowSet[0];
When you have duplicate values in the array you need to add 'track by $index'
<p ng-repeat="d in data track by $index"> {{d}} </p>
You're facing this issue because your array contains duplicates, you can check further information here
I'm creating a website with multiple tabs, and one of them is listing elements, it's the Product tab.
I've got a problem with "ng-repeat", I want to fill a HTML depending on a table of table in angular on the tab, it works fine on the first load, but if I go to another tab and then go again on the product tab, the "ng-repeat" repeats once more and it stacks with the first one.
Example:
Firstload: an apple and a strawberry are loaded fine.
Secondload: I now have apple strawberry and apple strawberry
And so on.
<slick dots="true" prev-arrow="null" next-arrow="null" init-onload="true" data="productsTab">
<div class="productsPage scrollBar" ng-repeat="tab in productsTab">
<div class="productsProduct" ng-repeat="product in tab">
<div class="productsProductTitle">{{product.name}}</div>
</div>
</div>
</slick>
I can also say that I load my data from a factory that I get in controller this way:
productsFactory.build().then(function(facto) {
$scope.productsTab = facto;
});
Hope you can help me!
I think your problem is that init-onload. I am not sure what it does, but if it triggers the call to the controller in some way, it also triggers the promise every time you go back to the tab. You can cache the results from the promise inside the service. Here's an article from this site on how to cache promises:
Caching a promise object in AngularJS service
Hope this will help.
Here is example how to handle multiple ng-repeats, I hope this will help you.
http://plnkr.co/edit/TfGMm1SgpRmgFSTuTuE0?p=preview
<script>
var app=angular.module('myapp',[])
app.controller('demo',function($scope){
$scope.products={
product:[{
name:'abc'
}]
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="demo">
<div ng-repeat="product in products">
<div ng-repeat="p in product">
<span>{{p.name}}</span>
</div>
</div>
</body>
I noticed from the docs I found here https://github.com/vasyabigi/angular-slick that there are no parenthesis on on-init=true. Not sure if that matters.
When I have issues with arrays not resetting I use angular.copy() an empty list variable before loading to the scope. That way I know the array is empty before I add anything to it.
In need the data from a ng-repeat on two places within the view. The code below works, but I am not sure if this is the way to do it. (I am new to Angular).
If a user clicks on a outlet-option the outlet-products get displayed. First I loaded the products below the outlet-option and used jQuery to move to the productsWrapper if a user clicks on an option. But then I needed to compile it again which made it a bit messy in my opinion.
There can be only one "#productsWrapper" and one ".outlet", so I came up with using the ng-repeat twice. But is this the way to go?
<div id="productsWrapper">
<div ng-repeat="element in elements track by $index" class="products" style="display: none;" id="prod-{{element.wonelement_id}}">
<outlet-product ng-repeat = "option in element.options"
class = "product"
option-data = "option"
element-data= "element"
chosen-data = "chosen">
</outlet-product>
</div>
</div>
<div class="outlet">
<div ng-repeat="element in elements track by $index">
<outlet-option
element-data = "element"
option-data = "element.option"
chosen-data = "chosen"
app-settings = "app">
</outlet-option>
</div>
</div>
I think what you proposed looks fine in a typical AngularJS way.
If you were applying filters to the ng-repeat clause, then I would have suggested applying that filter ahead of time in the controller so that it would only be run the one time. But since you are using no filters at all on the data, I think it is fine as you have it.
Im trying to tag different video items in a bootstrap table. I'm already using an ng-repeat to loop over the array of objects which store video data. I'm now trying to create a nested ng-repeat to loop over another array of "tags" within the ng-repeat that creates each table row.
I'm getting some weird results though. I was hoping that I could just put an ng-repeat on the td and then put the angular expression in a span with the boostrap class "badge". Any thoughts as to whats going wrong?
http://jsfiddle.net/jheimpel/6nh100ca/
<tr ng-repeat="topic in topics">
<td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>
<td>{{topic.topic}}</td>
<td>{{topic.date}}</td>
<td>{{topic.presenter}}</td>
<td ng-repeat="tag in topic.tags">
<span class="badge">{{topic.tags}}</span>
</td>
</tr>
Change it to
<span class="badge" ng-bind="tag"></span>
You're telling it to print out the array you're ng-repeating instead of the object the ng-repeat is giving you. Also ng-bind is better, see this
Getting this error when a page is being loaded with angular js in IE9. No issues with Chrom/FF.
"Unable to get value of the property 'nodeName': object is null or undefinedundefined"
Any pointers would help.I thought this was fixed as part of Angular js 1.0.1 release.
I got this error in IE9 when I accidentally had the following illegal markup.
<table>
<h3>foo</h3>
..... blah
</table>
Maybe run a html lint to make sure you're not violating any rules like that.
The problem was:
<table>
<tr ng-repeat="p in list">
<td>{{p.f1}}</td> {{p.f2}}
</tr>
<table>
Remember <tr> should contain only <td> tag not any another tag or raw text according to the HTML specification. Modern browsers (including IE 10) can deal with that mistake but in IE 9 angular raises an error.
Most probably you messed up with the syntax inside the
<table> <SOMETHING> </table>
I suggest you copy the DOM from browser and do a check on the https://validator.w3.org/check .
Look for errors like : document type does not allow element "SOMETHING" here; missing one of "TH", "TD" start-tag .
I got this error on angular-perf.js. If you add an conditional comment to exclude IE, it will work, but you won't be able to use angular-perf in IE.
For me the culprit was a thead tag in the table:
<table>
<thead>bla</thead>
...
</table>
For me, it was a case of having a table row inside of a div. I was fine as soon as I removed the intervening div.
<table>
<div>
<tr></tr>
</div>
</table>
for me the issue was << before Back hyperlink. I used htmllint and resolved all illegal mark up error except the ones for angular.
I had the same problem and it was because in a <table> I had put some <h3> not wrapped in <tr> and <td>, and also, I have some <br> and <br/> tags, which should better be <br />, for XHTML's sake.