How to append expression variable on ng-repeat in Angularjs
My code:
<div class="col-md-9" ng-controller="AddOrderController">
<div class="owl-demo" class="owl-carousel" ng-repeat="t in [1,2]">
<div class="item" ng-repeat="d in datas.item{{t}}" >
<imagedata value="d"></imagedata>
</div>
</div>
</div>
Error this line: ng-repeat="d in datas.item{{t}}"
i have data.items1, data.item2 json data
how to declare datas.item{{t}} ?
you can't use an expression in this case, but you don't need to because the t variable is already available to you. just use ng-repeat="d in datas['item' + t]"
If this ng-repeat is throwing Duplicate Key in Repeater, you may have to modify it slightly to be ng-repeat="d in datas['item' + t] track by $index"
How about ng-repeat="d in datas['item'+t]"?
Related
I have following code and try to use $index in delete function but it gives incorrect value of it.
<li ng-repeat="joinMember in data.teamMember | orderBy:'member.screenName || member.fname' ">
<div class="member-list-img">
<a ng-href="">
<img ng-src="{{joinMember.member.data.image ? (joinMember.member.data.imageType == 'avatar' ? '/public/images/avatars/' + joinMember.member.data.image : '/public/images/' + joinMember.member.data.image) : '/public/images/avatars/avatar-73.png'}}" width="100%" alt="{{joinMember.member.screenName ? joinMember.member.screenName : joinMember.member.fname + ' ' + joinMember.member.lname }}" />
</a>
</div>
<div class="member-list-cont">
<h4>
<a ng-href="#">
{{joinMember.member.screenName ? joinMember.member.screenName : joinMember.member.fname + ' ' + joinMember.member.lname }}
</a>
</h4>
<span>{{joinMember.created | date : "MMMM d, y"}}</span>
</div>
<div ng-if="data.canModify" class="membr-delete">
<a ng-href="">
<i class="fa fa-trash text_link" aria-hidden="true" ng-click="deleteTeamMember($parent.$index, joinMember.id)"></i>
</a>
</div>
</li>
That's because the directive ng-if creates a new scope for itself, when you refer to $parent, it access the immediate $parent's scope, i.e., the inner repeat expression's scope.
So if you want to achieve something you wanted like in the former, you may use this:
<div ng-repeat="i in list">
<div ng-repeat="j in list2">
<div ng-if="1">
({{$parent.$parent.$index}} {{$parent.$index}})
</div>
</div>
</div>
if you have more than one inner directives, you can use ng-init for storing $index in a variable for references in child scopes.
<div ng-repeat="i in list" ng-init="outerIndex=$index">
<div ng-repeat="j in list2" ng-init="innerIndex=$index">
<div ng-if="1">
({{outerIndex}} {{innerIndex}})
</div>
</div>
</div>
So try $parent.$parent.$index in your example and please check understanding the scopes
You are using $parent.$index in a div that have ng-if tag. which delete dom element(div) if condition is fall so that case you will receive incorrect $index value. but with ng-show it only add hide class to that div.
So try to ng-show if it is not important to remove div element instead just hide it.
Note:- You are also using orderBy filter in ng-repeat which will sort in only your DOM so if you will find incorrect object value in your controller.
As you can see in the official documentation of angularjs you should get a zero-based index via $index within a ng-repeat. Try the example by angularjs here. Try to debug data.teamMember in your controller to make sure that this is the correct array you'd like to iterate.
I am having issues accessing variables (attached to $scope) inside ng-repeat loop. My ng-repeat is as follows:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender ChattingWith}}</p>
</div>
I can use ChattingWith variable outside the ng-repeat but can't use it inside for some reason. I have used $parent.ChattingWith without any luck. Any help would be appreciated.
Write code like this:
<div class="row" ng-repeat="Message in Messages">
<p>{{ Message.Sender + ChattingWith}}</p>
</div>
This will solve the problem.
I have ng-repeat in my html. how I can add ng-repeat with dynamically changes name.
<div ng-repeat="category in categories"> //external repeat
<div ng-repeat="data in categoryData.{{categoryName here}}">
// want add instead .{{categoryName here}} defined (concrete) name from external loop.
In result I want have many places in html and different data for each place that will be places in categoryData.NameOfCategory .NameOfCategory will replaced to concrete name.
You can try this,
<div ng-repeat="category in categories">
<div ng-repeat="data in categoryData[category.name]">
<div ng-repeat="data in categoryData.['categoryName']">
I got some problem on AngularJS.
my controller, mainCtrl, has this variables :
this.colors = {Sam:blue,Jane:red,Tom:pink};
this.arr = [{person:'Sam',story:'some story'},{name:'Tom',story:'some story2'}]
And I got this code :
<div ng-controller="mainCtrl as vm">
<ul ng-repeat="obj in arr">
<li ng-style={color:vm.color[obj.person]}>{{obj.story}}</li>
</ul>
</div>
I want that the li will be colored such as the color of the person at colors dictionary . how can I handle that? I got undefined every time, but when I do it explictly its work , for Example :
<li ng-style={color:vm.color['Sam']}>{{obj.story}}</li>
You are using the controllerAs-Syntax, so you must use vm.arr in your ng-repeat. And furthermore you should use the ng-repeat on the list item:
<ul>
<li ng-repeat="obj in vm.arr" ng-style="{color:vm.color[obj.person]}">{{obj.story}}</li>
</ul>
It should look like this.
<div ng-controller="mainCtrl as vm">
<ul>
<li ng-repeat="obj in vm.arr track by $index"
ng-style="{'color':vm.colors[obj.person]}"
ng-bind="obj.story">
</li>
</ul>
</div>
Remember to use your alias vm (controllerAs)
Usetrack by with ng-repeat for better performance.
I think that ng-repeat should have been placed in li
Her's a working jsfiddle http://jsfiddle.net/irhabi/nh4ddemr/
I'd like to reference the next element is this possible within the ng-repeat directive ?
<li ng-repeat="row in rows">
if {{row.someValue}} === {{row+1.someValue}}
//Is it poss to check if the following row so I can do some kind of conditional comparison ?
</li>
Thanks
W
As #PSL said - you just need to get the next index in the array you are looping:
<li ng-repeat="row in rows">
{{rows[$index+1]}} // this will give you the next row's data
<div ng-switch on="rows[$index+1].value">
<div ng-switch-when="true">
<!-- shows when the value of the next row is true-->
</div>
<div ng-switch-when="false">
<!-- shows when the value of the next row is false-->
</div>
</div>
</li>