ng-class in Angular js - angularjs

I need this html
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="last">4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="last">8</div>
<div>
I am using this function
<div class="col-md-3"
ng-repeat="items in data.data"
data-ng-class="{'last': $index%3 == 0 && $index!=0}" >
But i m getting this output
<div>
<div>1</div>
<div>2</div>
<div>3</div>
<div class="last">4</div>
<div>5</div>
<div>6</div>
<div class="last">7</div>
<div>8</div>
<div>

Use 4, not 3 if you want the rows with index divisible by four.
{'last': ($index + 1 ) % 4 == 0 && $index != 0}

Finally i got the solution
{'last': ($index+1) % 4 == 0 && $index!=0}
#Ben Black comments helped me.
Edit suggested
{'last': ($index+1) % 4 == 0 } because $index never be zero
This solution might help others

Related

How to add event handler to first item in Vue loop?

I have a list of items I am iterating through and need to programmatically add an event handler to the first rendered element. I do not see how this is possible in Vue.
<div ref="componentList" class="component-list col-9">
<template
v-for="( course, index ) in sortedCourseList"
>
<span
v-if="( index > 0 ) && (course.courseTitle[ 0 ] !== sortedCourseList[ index - 1].courseTitle[ 0 ])"
:id="course.courseTitle[ 0 ]"
:key="index"
class="component-list__letter-heading"
>
{{ course.courseTitle[ 0 ] }}
</span>
<CardLong
v-else
:key="index"
:ref="'card' + index"
>>> EVENT HANDLER <<<
:title="{
text: course.courseTitle,
order: 1,
}"
titleTag="h2"
icon
/>
</template>
</div>
I am looking where to implement something like
if ( index === 0 ) { ... }
in the CardLong component instance.
You can use the ternary operator to conditionally call a function on your event, whatever that is:
<div v-for="(a, i) in [1,2,3,4]" :key="i" #click="i == 0 ? doSomething() : ''">
Click Me!
</div>

Cannot print current value in ng-repeat

Here is my code:
codepen.io/bedtvapp/pen/NMoBby
<div ng-app="app">
<h1>AngularJS Directive Controllers</h1>
<div ng-init="count1 = 1"></div>
<div ng-repeat-start="a in [1, 2, 3, 4, 5]" ng-init="$parent.count1 = $parent.count1 + 1"></div>
<div>
abc {{ a }} - {{::$parent.count1}} </div>
<div ng-if="$parent.count1 % 2 == 0">breakline</div>
<div ng-repeat-end></div>
</div>
I want to count item in array into custom variable (count1) (not $index). Because I will add more condition to my counting later.
If you just want to print count then just do following changes in your code
<div ng-app="app">
<h1>AngularJS Directive Controllers</h1>
<div ng-repeat-start="a in [1, 2, 3, 4, 5]" ></div>
<div>
abc {{ a }} - {{$index + 1}} </div>
<div ng-repeat-end></div>
</div>
You no need to do any initalization thing
If you increment count1 in ng-repeat-start init, end of the repeat count1 have the same value. So you need to get the help of $index. You can use count1 for the set starting value.
You can simply achieve your target using bellow code
<div ng-init="count1 = 1"></div>
<div ng-repeat-start="a in [1,2,3,4,5]" >
abc{{a}}- {{count1+$index+1}}
</div>
<div ng-if="(count1+$index+1) % 2 == 0">breakline</div>
<div ng-repeat-end></div>
output like this,
abc1- 2
breakline
abc2- 3
abc3- 4
breakline
abc4- 5
abc5- 6
breakline
If you want to add more condition you need based on (count1+$index+1) value.

ng-repeat on one of two arrays based on condition

Say I have
<div ng-if="groupA.length > 0" ng-repeat="element in groupA"> .... </div>
<div ng-if="groupA.length == 0" ng-repeat="element in groupB"> .... </div>
Both divs are exactly the same HTML except for the if conditions and the fact that they repeat on two different groups. Am I able to join them together in one div element? I.e. <div ng-repeat="element in (groupA || groupB)"> ... </div>
I know I can check in the controller to and have a condition there like groupC = groupA.length > 0 ? groupA : groupB and have in the html <div ng-repeat="element in groupC> ... </div> but I was wondering if there's a way to do it on HTML directly?
Should work with ternary operators. Demo: https://plnkr.co/edit/yqrUb2UNAasFs4EKaf0b
<div ng-repeat="element in (groupA.length > 0 ? groupA : groupB)"> .... </div>
you can just add a condition inside the ng-repeat like as
<div ng-repeat="element in (groupA.length > 0 ? groupA : groupB)"> </div>
Hope this will help you

Angular js - how to increment in html based on condition

I am using angular repeat to populate form's fields dynamically. There is a scenario where I need to to notify user(show ! icon for duplicate fields). Below is code snippet:
<div ng-init="counter = 0">
<div ng-repeat="item in list track by $index">
<div ng-show="{{item.show}}">{{counter+1}}</div>
</div>
<div ng-show="{{counter > 1}}"> ! </div>
</div>
Counter variable only increment if its used like {{counter + $index}}, can it be possible without $index?
Assigning variables inside html is not officially supported.
But there is always a hack for what you asked:
<div ng-init="counter = 0"></div>
<div ng-repeat="n in [1,2,3,4,5]">
<div style="display:none;">{{ n == 3 ? counter = "World!" : counter = n }}</div>
<p>Hello {{ counter }}</p>
</div>
Notice that I used a non-displayed div for assigning the "counter" conditionally.
Output:
Hello 1
Hello 2
Hello World!
Hello 4
Hello 5
Answer to the 1st comment:
When counter == 3, we divide it by 2.
<div ng-init="counter = 0"></div>
<div ng-repeat="n in [1,2,3,4,5]">
<div style="display:none;">
{{ counter = n }}
{{ counter == 3 ? counter = counter / 2 : counter = counter }}
</div>
<p>Hello {{ counter }}</p>
</div>
Output:
Hello 1
Hello 2
Hello 1.5
Hello 4
Hello 5
Answer to the 3rd comment:
I finally understood what you asked. Let me change the way to approach by using ng-if to keep the record of counter. I used ng-init to increment the counter when n is divisible by 2. You need to call $parent.$parent.counter to reach the original counter otherwise ng-if will create its own counter inside the child scope.
JSFiddle
<div ng-init="counter = 0"></div>
<div ng-repeat="n in [2,6,5,6,8,9,11] track by $index">
<!-- ngRepeat child scope -->
<div ng-if="n % 2 == 0"
ng-init="$parent.$parent.counter = $parent.$parent.counter + 1"
style="display:none;">
<!-- ngIf also creates a child scope -->
</div>
</div>
<p>Counter = {{ counter }}</p>
Output:
Counter = 4

Inject scope in ng-class

my problem is simple:
i'm doing this:
<div class="text-center tag row class_{{infoticket.tags[0]}}">{{infoticket.tags[0]}}</div>
<div ng-repeat="item in ticketcontent track by $index">
<div style="display: block"
class="container row col-md-offset-1 col-md-8"
ng-class="{true: 'agent', false: 'collab_infoticket.tags[0]'}
[item.author_id == 591119252 ||
item.author_id == 619780882 ||
item.author_id == 653783901 ||
item.author_id == 645192392 ||
item.author_id == 513340771 ||
item.author_id == 513345171]">
<div ng-class="mybind" ng-bind-html="item.html_body"></div>
<div>{{item.created_at | date}}</div>
<div ng-switch="item.author_id">
<div ng-switch-when="591119252">Agent: Mystique</div>
<div ng-switch-when="619780882">Agent: Batman </div>
<div ng-switch-when="653783901">Agent: Superman </div>
<div ng-switch-when="645192392">Agent:Iron Man </div>
<div ng-switch-when="513340771">Agent:Green Hornet </div>
<div ng-switch-when="513345171">Agent:Tornade </div>
<div ng-Switch-Default>Collaborateur: {{myname}}</div>
</div>
</div>
The problem is most of the time my class in css collab_infoticket.tags[0] is not working so i would like to know if it comes from a syntax problem. Which is weird is that sometimes it works ! However this class_{{infoticket.tags[0]}}always works.
I'm not sure what you're trying to do in that ng-class is valid syntax. Try a ternary operator instead:
ng-class="(item.author_id == 591119252 ||
item.author_id == 619780882 ||
item.author_id == 653783901 ||
item.author_id == 645192392 ||
item.author_id == 513340771 ||
item.author_id == 513345171)
? 'agent' : collab_infoticket.tags[0]}">
Note that collab_infoticket.tags[0] should be unquoted if you want the contents of that variable set as the classname; if quoted as you had it, you'll get the variable name itself as the classname.
(Or better still, calculate all of this inside the directive or controller, this is probably too much logic to be embedding in the template.)

Resources