it is possible to customize the template of the tree base header (the column which contains the "+" and "-" icon when the grouping is active ) ?
I want to modify the content of the blank cells and display inside them a row number ({{row.grid.renderContainers.body.visibleRowsCache.indexOf(row)}}) ...
I found the content of the template I need to modify:
<i ng-class="
{ 'ui-grid-icon-minus-squared':
(
(grid.options.showTreeExpandNoChildren && row.treeLevel > -1)
|| (row.treeNode.children && row.treeNode.children.length > 0)
) && row.treeNode.state === 'expanded',
'ui-grid-icon-plus-squared':
(
(grid.options.showTreeExpandNoChildren && row.treeLevel > -1)
|| ( row.treeNode.children && row.treeNode.children.length > 0)
)
&& row.treeNode.state === 'collapsed'
}"
ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}"
class="ui-grid-icon-minus-squared" style="padding-left: 10px;">
</i>
...but I don't see how to change it and store my modification in the gridOption
Yes, it is possible. I needed the same thing. While searching I found this thread. This mentions that you can override templates by feeding the templateCache. (I used the accepted method (using script tag).) For this I just needed the reference of the template which I wanted to override, so "ui-grid/treeBaseRowHeaderButtons". For my case I inserted a row count number before the icon. The code I placed in my view's html:
<script id="ui-grid/treeBaseRowHeaderButtons" type="text/ng-template">
<div class="ui-grid-tree-base-row-header-buttons" ng-class="{'ui-grid-tree-base-header': row.treeLevel > -1 }" ng-click="treeButtonClick(row, $event)">
<span class="countNumber">{{ row.entity.count }}</span>
<i ng-class="{'ui-grid-icon-minus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel> -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'expanded', 'ui-grid-icon-plus-squared': ( ( grid.options.showTreeExpandNoChildren && row.treeLevel > -1 ) || ( row.treeNode.children && row.treeNode.children.length > 0 ) ) && row.treeNode.state === 'collapsed'}"
ng-style="{'padding-left': grid.options.treeIndent * row.treeLevel + 'px'}">
</i>
</div>
</script>
Related
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>
I want to hide the button if it's the delete folder and show if it's the inbox. The code below does not work as the button is always shown.
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="" >
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue = 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()" >
{{"button.delete"|translate}}
</button>
</div>
</div>
Thanks
You need to use ==, == is loose equality and === is strict equality. Read more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness
<div class="message-footer-height" >
<div class="custom-div-class" ng-click="">
<button class="custom-btn-default"
ng-hide="messageState.details && itemTappedValue == 'delete'"
ng-class="{ 'msg-btn' : userMessageDetails.id === -1 }"
ng-click="deleteMessage()">
{{"button.delete"|translate}}
</button>
</div>
</div>
You need double equal sign here itemTappedValue = 'delete'
I have a ng-repeat that builds a table from a web service. I render 6 values like this: med:1 lab:1 pl:1 in one cell. I need to make a decision based on those 6 values. My ng-repeat code is like this:
<tr ng-repeat="(pid, value) in patient|groupBy:'pid'">
<td>{{pid}}</td>
<td ng-repeat="(disease, value) in patient|groupBy:'name'">
<span ng-repeat="item in value|filterBy:['pid']:pid" ng-model="disease-conditial">
{{item.src}}:{{item.total}}
</span>
<!--This is the code that I'm trying to make to work-->
<span class="label label-danger" ng-show="
(item.src == 'med' and item.total > 0) and
(item.src == 'lab' and item.total > 0 and
(item.src == 'pl' and item.total > 0))">Yes
</span>
</td>
</tr>
Please consider this sudo code. I need three conditions:
if src == med && total > 0
and
if src == lab && total > 0
and
if src == pl && total > 0
then Yes
if src == med && total == 0
if src == lab && total > 0
if src == pl && total > 0
then Maybe
if src == med && total == 0
if src == lab && total == 0
if src == pl && total == 0
then No
I was reading about ng-switch but this directive doesn't support conditionals with dynamic data $scope.something == 1
Does Angular has any built in directive where I can achieve this?
The data in the cell looks like this:
+-----------------+
|med:1 lab:1 pl:1 |
+-----------------+
I need to evaluate the value of med && the value of lab && the value of pl to make the decision of Yes, Maybe, No.
Update 7 SEP 2016
The data that comes from the object is as follow:
Array[50]
0:Object
$$hashKey:"object:18"
name:"Alcoholism"
pid:"1"
src:"lab"
total:"1"
__proto__:Object
1:Object
$$hashKey:"object:19"
name:"Alcoholism"
pid:"1"
src:"med"
total:"1"
__proto__:Object
2:Object
$$hashKey:"object:20"
name:"Alcoholism"
pid:"1"
src:"pl"
total:"0"
__proto__:Object
Once again, scenario 1. if med > 0 && lab >0 && pl >0 then Yes. Scenario 2. if med == 0 && lab > 0 && pl > 0 then Maybe. Scenario 3. if med == 0 && lab == 0 && pl == 0 then No.
You can use a ng-switch with item.src like this:
<div class="animate-switch-container" ng-switch on="item.src" ng-show="item.total > 0">
<div ng-switch-when="med">med</div>
<div ng-switch-when="lab">lab</div>
<div ng-switch-when="pl">pl</div>
</div>
With the ng-show in the entire div will make the same and validation.
I ill prefer you to get single value from controller which you want to display on view but ng-bind can also help you render required data
<span class="label label-danger" ng-bind="item.total>0 && (item.src === 'med' || item.src === 'lab' || item.src === 'pl')?'yes':'no'"> </span>
I think you are just putting your conditions wrong. I'm doing some guessing here, but what I think you are trying to do is this:
<tr ng-repeat="(pid, value) in patient|groupBy:'pid'">
<td>{{pid}}</td>
<td ng-repeat="(disease, value) in patient|groupBy:'name'">
<span ng-repeat="item in value|filterBy:['pid']:pid" ng-model="disease-conditial">
{{item.src}}:{{item.total}}
</span>
<!--This is the code that I'm trying to make to work-->
<span class="label label-danger" ng-show="
((item.src == 'med' || item.src == 'lab' || item.src == 'pl') and item.total > 0)">
Yes
</span>
<span class="label label-danger" ng-show="
((item.src == 'med' && item.total == 0) || (item.src == 'lab' and item.total > 0) || (item.src == 'pl' and item.total > 0))">
Maybe
</span>
<span class="label label-danger" ng-show="
((item.src == 'med' || item.src == 'lab' || item.src == 'pl') and item.total == 0)">
No
</span>
</td>
</tr>
It is not a problem with the ng-show directive, it is a problem with the conditions inside it.
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.)
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