I'm trying to get an html <br> tag after a determined amount of elements with ng-repeat. As an example every 5th button gets a <br> appended to it. I tried multiple approaches but can't seem to get it right. I'd appreciate if anyone can give me some pointers on how to achieve this. Thanks in advance.
<button type="button" class="btn btn-default btn-small" ng-repeat="item in items"
{{item}}
</button>
You can check for every fifth element using $index of ng-repeat, after that you can use ng-show directive to show <br /> accordingly
<br ng-show="($index + 1) % 5 == 0" />
I assume this is supposed to be a row of buttons before each <br>? Easiest way to do this is to create a button container to repeat on, and making use of the ngIf directive alongside the $index property of ngRepeat to determine if the <br> should exist:
<span ng-repeat="item in items">
<button type="button" class="btn btn-default btn-small">{{ item }}</button>
<br ng-if="$index && $index % 4 == 0">
</span>
The first $index inside the ngIf will evaluate to false on the first index (as it's the 0th index, so you don't get an early line break) and $index % 4 will correspond to the 5th button overall accounting for the 0th index.
Related
what I want is the "seen" only shows one time if match the if condition.
<span class="seen" ng-if="!isDone">
<i ng-init="isDone=true" class="icon icon-ok border0 font12 green"></i> seen
</span>
<b>{{msg.username}} :</b>
<span ng-bind="msg.message"></span>
</td>
https://jsfiddle.net/3n6x08aj/2/
Try using track by $index in ng-repeat and for first node you can check the condition $index === 0
Working fiddle https://jsfiddle.net/3fmjzcb1/
I have iterated dropdown and I would like to know what is the position of each of these dropdowns when I click on it.
<div class="row" ng-repeat="animal in vm.animals">
{{animal}}
<btn-group uib-dropdown>
<button class="btn btn-secondary btn-sm uib-dropdown-toggle
ng-click="vm.checkPosition($event)">{{vm.test}}
</button>
<div class="dropdown-menu" uib-dropdown-menu>
<a class="dropdown-item" ng-repeat="dog in vm.dogs">
{{dog}}
</a>
</btn>
function checkPosition($event) {
// I tried use here $event.target.el.getBoundingClientRect().top, but this
// position isnt element which I clicked, but propably first element with
// this class
}
As the docs describe, you have access to certain variables inside of your ng-repeat.
For example $first is true only for the first element, $last only for the last one.
What you are looking for is $index
If you mean the index of the array you can use $index as Scorpioo590 mentioned. which in angularjs will give you the item's index in the array that is used in the ng-repeat you can use it like this:
ng-click="vm.checkPosition($event, $index)"
function checkPosition($event, index) {
console.log(index);
}
I am slowly advancing into angular. At this point I have form with several steps, each step is made of ng-form, since each step contains "continue" button and common headers I have following loop
<section ng-from="form12.{{step.id}}" ng-repeat="step in steps" id="{{step.id}}" ng-class="{active: currentSection == $index}">
<h1 class="header">{{$index + 1}}. {{step.title}}</h1>
<div class="content">
<ng-include src="step.template"></ng-include>
</div>
<!--and button code-->
<div class="content-body" ng-show="currentSection == $index">
<button ng-show="$index != 0" class="btn prev" ng-click="prevSection()">Previous</button>
<button class="btn next" ng-click="nextSection()" ng-disabled="step{{$index+1}}.$invalid">{{isLastStep($index)}}</button>
<div style="clear: both;"> </div>
</div>
</section>
So in that way I am not repeating same buttons code for each ng-form.
Before that I was using only ng-include and sections were hard coded, I suppose I am missing $scope now, as ng-include creates one as well as ng-repeat, could someone advise me on how can I make Continue button dependant on each ng-form validation result? (How can I access each individual ng-form results in topmost $scope?)
Each button has access to that form's $error, so you could have this for example:
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">
You also have ng-form spelled incorrectly (ng-from), although I assume that was an artifact from you pasting/typing in.
If you want to disable button if one of the forms is invalid
How can I access each individual ng-form results in topmost $scope?
You can wrap ng-repeat in ng-form and top ng-form will be invalid if any child form in ng-repeat is invalid.
Or if you wan't to block button per form then
<button class="btn next" ng-click="nextSection()" ng-disabled="form12.{{step.id}}.$invalid">{{isLastStep($index)}}</button>
Sorry for not being specific, but I'm having a blackout and am desperate.
Have been struggling for 2 days now to find the logic to do the following:
every item has a 'inCart' value. if it's 0, it's not in there, if it's below 7, it's in one of 6 'slots' depending on the value.
now i have buttons that assign each item to a value in inCart.
but if one of the items has a value in it that is 4, then I obviously don't want all the items to show a button that will assign it to 4.
<tr ng-repeat="x in myItems">
<a ng-repeat="slot in [1,2,3,4,5,6]" ng-click="addToCart(x._id, slot)"
class="btn btn-primary {{x.inCart != '0' ? 'disabled' : ''}}">
{{slot}}
</a></tr>
Thinking about it logically I know my mistake: i only look if the current item is in the cart, and if it is then it disables the button. How do I look at all the items in the cart, and if one of them is for example 4, then all the buttons that assign an a value 4 to inCart are disabled, so that I won't have multiple items with the same location inCart.
based on the approach I can fix this I am pretty sure I can make everything work better then how it is now, it's just that I can't even figure this out so let alone the more detailed issues.
You can use the ngClass directive
You can evaluate a expression with ng-class and if it's true you can apply a certain class. If not, then the class won’t be applied.
<button ng-class="{'disabled': expression}">
If you use an actual button, you can make use of ngDisabled:
<input type="button" ng-repeat="slot in [1,2,3,4,5,6]"
ng-click="addToCart(x._id, slot)"
class="btn btn-primary"
ng-disabled="x.inCart !== '0'" value="{{slot}}" />
You could call a function to check if the slot is available.
Controller
// return the slots already used
var slotsUsed = $scope.myItems.map(function (i) {return i.inCart;}).filter( function(s) { return s > 0;});
$scope.slotAvailable = function(s) {
return slotsUsed.indexOf(s) == -1;
}
View
<tr ng-repeat="x in myItems">
<td>
<a ng-repeat="slot in [1,2,3,4,5,6]"
class="btn btn-primary"
ng-click="addToCart(x._id, slot)"
ng-class="{'disabled': x.inCart != '0' || !slotAvailable(slot)}">
{{slot}}
</a>
</td>
</tr>
There's a directive designed specifically for this: ngDisabled
https://docs.angularjs.org/api/ng/directive/ngDisabled
I need some help with a problem I'm facing with pagination on AngularJS
Right now I have 3 tables, two of them have available items to select, and the third one, stores and show selected elements of the other tables, then I added pagination to each table, but I'm having some troubles with the selection table, If I add or remove elements individually, everything works as expected and the number of pages on selection table are updated.
The problem is when I use "Check All" function of the first table, the number of the pages doesn't get updated, I don't know what can I do in this case, I guess is something in check all funcition maybe but I run out of ideas right now
This is what I have so far:
http://embed.plnkr.co/e5P6iZ4W3P0Yb0YQy7Fu/preview
This is how the number of pages are calculated in numberOfSelectionPages function:
$scope.numberOfSelectionPages = function() {
return Math.ceil($scope.selection.length / $scope.pageSelSize);
};
And this is how the template is created on the html file:
<div class="pagination pagination-centered" ng-show="selection.length">
<ul class="pagination-controle pagination">
<li>
<button type="button" class="btn btn-primary" ng-disabled="curSelPage == 0"
ng-click="curSelPage=curSelPage-1"> < PREV</button>
</li>
<li>
<span>Page {{curSelPage + 1}} of {{ numberOfSelectionPages() }}</span>
</li>
<li>
<button type="button" class="btn btn-primary"
ng-disabled="curSelPage >= selection.length/pageSelSize - 1"
ng-click="curSelPage = curSelPage+1">NEXT ></button>
</li>
</ul>
</div>
This is what I used for pagination:
http://angulartutorial.blogspot.in/2014/03/client-side-pagination-using-angular-js.html
I hope maybe somebody can give me a hand on this
Thanks in advice!