Inject scope in ng-class - angularjs

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

Related

ng-hide does not hide button

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'

Multiple conditionals with ng-show 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.

Hide a <div> if the fiel is empty

I have this with a field. I want if the fild is empty, don´t show this div.
<div class="item noborder">
<img class="full-image" image-lazy-loader="lines" image-lazy-src="{{restaurantes.fornecedor_visual_foto2}}" />
</div>
How I can do it?
I tried:
<div ng-hide='{{restaurantes.fornecedor_visual_foto1}} = '' '>
<div class="item noborder"><img class="full-image" image-lazy-loader="lines" image-lazy-src="{{restaurantes.fornecedor_visual_foto1}}" /></div>
</div>
But it´s wrong...
It may also come back as undefined or null. You may want to try.
{{restaurantes.fornecedor_visual_foto1}} === '' || {{restaurantes.fornecedor_visual_foto1}} == undefined ||
{{restaurantes.fornecedor_visual_foto1}} == null
However I'd put this in my controller and call a function which would return a bool to keep the html clean

Showing discard and save buttons when objects aren't equal

In the controlller I have this code when the template loads:
$scope.pristine_timesheet = angular.copy($scope.timesheet);
In the template I want to do this:
<div ng-show="(timesheet != pristine_timesheet)">
<div class="button-bar">
<a class="button button-positive" ng-click="update(form)">Save changes</a>
<a class="button button-stable" ng-click="discard(form)">Discard changes</a>
</div>
</div>
For some reason this is always showing the buttons. I know I could use $dirty but wondering why this isn't working.
I solved it by extending the class in the service like this:
angular.extend(Timesheet.prototype, {
compare: function(timesheet){
return ((timesheet.id == this.id) && (timesheet.notes == this.notes) && (timesheet.task_link_id == this.task_link_id) && (timesheet.time_start == this.time_start) && (timesheet.time_end == this.time_end));
}
In the template I can now simply do:
<div ng-show="!(timesheet.compare(pristine_timesheet))">
Thanks PSL for the explanation. I also tried with lodash isEqual but that one didn't work for me: https://lodash.com/docs#isEqual

ng-class in Angular js

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

Resources