Multiple conditionals with ng-show AngularJS - angularjs

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.

Related

Customize AngularJs UI-Grid Tree base Header

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>

Add separation on ng-repeat values angularjs

<span ng-repeat="sport in profile.sports track by $index">
{{ (profile.type == 2) ? ($index >= 0) ? sports[sport.sport_id] + ", " : sports[sport.sport_id] : '' }}
</span>
I want each element to be separate by , if there is at least 1 item.
Expected result in sports[sport.sport_id]:
cricket, football, hockey
cricket, hockey
cricket
cricket, soccer
Currently I'm getting all these without commas, please suggest, thanks.
You can use javascript join with comma separated
Example
<span ng-repeat="sport in [{value: ['a']}, {value: ['b','c']}]">
<pre>{{sport.value.join(', ')}}</pre>
</span>
Ouput:
a
b, c
try this
<span ng-repeat="sport in profile.sports track by $index">
{{ modifiedSport(sport, $index) }}
</span>
and add this to your controller
$scope.modifiedSport = function(sport, idx){
($scope.profile.type == 2) ? (idx >= 0) ? $scope.sports[sport.sport_id] + ", " : $scope.sports[sport.sport_id] : ''
}

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.)

Angular Conditional Class Based On Character Count

How to conditionally apply a class based on the character count of the model?
E.g.:
$scope.sample = 555;
<span ng-class="{ 'char3': sample.length == 3 }">{{ sample }}</span>
You can convert sample to string and the check its length:
<span ng-class="{ char3: (sample + '').length == 3 }">{{ sample }}</span>
<span ng-class="(sample.length === 3) ? 'three':'notthree'">{{ sample }}</span>

How to change opacity with ngstyle?

I have in controller so far:
$scope.currentPage = 0;
Now, without any additional code (method) in controller I want to set opacity 0.4 on image when currentPage ==0
So I wrote:
<div ng-controller="ctrlRead">
<div class="pagination no-margin ">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href=""
ng-class="{disabled: currentPage == 0}">
<i class="icon-fast-backward"
ng-style="{opacity : (currentPage == 0)?'0.4':'1'}">
</i>
</a>
</li>
</ul>
</div>
</div>
But I get error:
Unexpected next character at columns 29-29 [?] in expression [{opacity : (currentPage == 0)?'0.4':'1'}]
Fiddle
Do I miss something?
Thank you,
[EDIT]
I can write ng-style="myOpacity"
and in controller:
$scope.myOpacity = {
'opacity': ($scope.currentPage == 0)?0.4:1
};
But it demands additional code in controller
Actually, AngularJS 1.1.5 has ternary operator (see https://github.com/angular/angular.js/commit/6798fec4390a72b7943a49505f8a245b6016c84b) so if you use a version >= 1.1.5 you should be able to use:
ng-style="{'opacity' : currentPage == 0 ? 0.4 : 1}"
Update: Since version 1.1.5, Angular does have support for ternary operator in templates.
Angular does not have support for the ternary operator in templates. You can, however, use the poor man's ternary operator:
ng-style="{opacity : ((currentPage == 0) && '0.4') || '1'}">

Resources