I am using two ng repeats but the second one it doesnt display. Let me show you my view :
<div class="post" ng-repeat="user in users | orderBy:'username':false" ng-class-odd="'odd'" ng-class-even="'even'">
<p>{{user.username}}</p>
<small><a ng-click='gotomessages(user.username)' class="btn btn-default">go</a></small>
<small class="pull-right"> Message</small>
<div ng-repeat="message in messages[$index]">
<p>{{message.name}}</p>
</div>
</div>
the $index is the one of the first ng-repeat. Is it possible to use it like i did ? In anyway the second ng repeat doesnt work can you help
Just use $parent.messages[$index] instead of messages[$index] in the second ng-repeat
Related
Hi , I am uploading documents along with some key word as you can see in the diagram.Here is the code for for inserting key words into the panel which is formed inside a div.
<div class="tagListForDocument col-xs-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{'TAG.TagsForDocument' | translate}}</div>
<div class="panel-body btn-group-vertical" role="group" aria-label="available tags">
<button ng-repeat="tag in ul.tagsForDocuments" ng-click="ul.removeTag(tag)" class="btn btn-flat">
<span class="icon-remove"></span> {{tag.name}}
</button>
</div>
</div>
</div>
As you can see the keywords are formed ({{tag.name}}) based on iteration of ul.tagsForDocuments array.
Now my problem is that I want to remove all these keywords once the uploading is finished.That means before uploading second time the panel should be empty. But dont know the efficient way of doing this. How can I reload this particular part of html with empty ul.tagsForDocuments array.
In your controller you can do:
ul.tagsForDocuments = [];
which will make the array empty. Angular will then update the view accordingly.
I have the following ng-repeat that gets 3 items at a time:
<div ng-repeat="post in posts | filter:search | filter:customFilter">
<span ng-switch="" on="$index % 3">
<div class="row" ng-switch-when="0">
<div class="col-sm-4">
{{posts[(posts.indexOf(post))]}}
</div>
<div class="col-sm-4">
{{posts[(posts.indexOf(post + 1))]}}
</div>
<div class="col-sm-4">
{{posts[(posts.indexOf(post + 2))]}}
</div>
</div>
</span>
</div>
My problem is that if the search or customFilter apply to one post, I will get all three items even though the second and third ones don't apply.
PLNKR
In that PLNKR if you search for "1", you will get three items instead of just one.
Is there a way to filter one item at a time as opposed to all 3 at a time?
Store the filtered values in a variable like this
post in filteredPosts = (posts | filter:search | filter:customFilter)
the use the filteredPosts.length plus ng-show / ng-hide to hide the extra items
Edit: Apparently just using a filtered variable, and using it to get the posts in the {{}} (like filteredPosts[(filteredPosts.indexOf(post))]) works just fine.
Is this what you want? Plunker
I'm trying to do a ng-repeat over a json array. I'm able to do the first iteration of 'event in calendar'. But I'd not have to manually iterate through each number.
This works:
<div ng-repeat="event in calendar">
{{event[0].custom_fields.location[0]}}
{{event[0].custom_fields.price[0]}}
{{event[1].custom_fields.location[0]}}
{{event[1].custom_fields.price[0]}}
{{event[2].custom_fields.location[0]}}
{{event[2].custom_fields.price[0]}}
</div>
I've tired doing two ng-repeats and it fails. How do I fix this?
<div ng-repeat="event in calendar">
<div ng-repeat="custom_fields in event.custom_fields">
{{custom_fields.location[0]}}
{{custom_fields.price[0]}}
</div>
</div>
According to your first example, event is the array, not the custom_fields property. Iterate it instead.
<div ng-repeat="events in calendar">
<div ng-repeat="event in events">
{{event.custom_fields.location[0]}}
{{event.custom_fields.price[0]}}
</div>
</div>
I need to start working in a directive.
I have 5 different views where the html is exactly the same, so I need to do the directive in order to minimize my HTML.
<div class="list betslip-item">
<div class="item betslip-header"
ng-class="slip.active == '1' ? 'betslip-header-active' : 'betslip-header-inactive'">
<div class="row">
<div class="col slip-name" ng-click="openMoreInfoSlip(slip)">
{{:: slip.teamName}}
</div>
<div class="col-30">
<a class="button-size select-button"
ng-click="swapLineSelection(slip)">
<i class="fa" ng-class="slip.active == '1' ? 'fa-check-circle' : 'fa-plus-circle'"></i>
</a>
<a class="button-size close-button"
ng-click="removeSlip(slip)"><i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<div class="item item-input" ng-class="(slip.lines.length > 1) ? 'item-select' : ''">
<div class="input-label">
{{:: slip.nss}} - {{::slip.gameDate}}
</div>
<span class="pick-label"
ng-init="currentLine = getCurrentLine(slip)"
ng-if="slip.lines.length < 2">{{:: currentLine.pick}}</span>
<select
ng-if="slip.lines.length > 1"
ng-init="currentLine = getCurrentLine(slip)"
ng-model="currentLine"
ng-options="line as line.pick for line in slip.lines"
ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
</select>
</div>
</div>
That is the HTML I am talking about, I should include css classes and everything, is that possible?
Any help is very welcome.
You don't need to use a custom directive. If all you want to achieve is to be able to reuse some html you can always put it into another template and use it by ng-include:
<ng-include src="'/templates/reusableComponent.html'"></ng-include>
Reusing the same HTML file as 5 different views is possible but you will need to place all the value or data that you require to show on all the 5 pages in one and use javascript or jquery to display according. so instead of doing this creating 5 views would be better, it isn't using up any server processing time, only memory and since it's just 5 views i dont think it would affect it so much also.
i've also included a link of the Angular project that i was working on below, which had aorund 2-3 views so incase you require as to go about that, with ng-route etc.
GitHub link for AngularJS Project
Hope this helps
Even more values are pushed into the array:
.controller('MyCtrl', function($scope) {
$scope.mottos = [];
$scope.mottos.push('One');
$scope.mottos.push('Two');
$scope.addMotto = function(motto) {
$scope.mottos.push(motto);
}
});
and
<span ng-repeat="motto in mottos"> {{motto}} </span>
ng-repeat does not show all elements as expect: codepen, why?
...
HTML
<ion-content>
<button class="button button-positive" ng-click="addMotto('More')">
<i class="icon ion-quote"> Click me to add more ...</i>
</button>
<div class="card item-text-wrap">
<div class="item">
{{mottos.length}}
<span ng-repeat="motto in mottos"> {{motto}} </span>
</div>
</div>
</ion-content>
From the documentation:
By default, ngRepeat does not allow duplicate items in arrays. This
is because when there are duplicates, it is not possible to maintain a
one-to-one mapping between collection items and DOM elements.
If you do need to repeat duplicate items, you can substitute the
default tracking behavior with your own using the track by
expression.
So if you update your code as follows, things work as expected:
<span ng-repeat="motto in mottos track by $index">
{{motto}}
</span>
Instead of this
<span ng-repeat="motto in mottos"> {{motto}} </span>
try something like this
<span ng-repeat="motto in mottos track by $index"> {{motto}} </span>
you can see this in more detail on this page
Your issue occurs because ng-repeat does not have a unique identifier for each object. If you change the code to append the length on each object (more1, more2, more3, etc since lengths/indexes are unique) it works fine. I've seen a similar issue in WPF.
because you need to use $track by
he solution is actually described here: http://www.anujgakhar.com/2013/06/15/duplicates-in-a-repeater-are-not-allowed-in-angularjs/
http://codepen.io/anon/pen/doRKWY
<span ng-repeat="motto in mottos track by $index"> {{motto}} </span>