I need to hide element if value is zero. I tried:
<span ng-hide="currentCount.appointment == 0">{{currentCount.appointment}}</span>
In console.log(currentCount.appointment) I see that after changes value of currentCount.appointment is zero, but why span block does not hide?
Full code:
request.success(function () {
$scope.currentCount = CounterNotificationService.setCounterInc('appointment', 'decr');
console.log($scope.currentCount.appointment);
});
seems to work,
{{currentCount.appointment == 0}}
evaluates to
true
i created a fiddle with the ng-hide and the ng-class approach
Try this:
<span ng-hide="currentCount.appointment == '0'">{{currentCount.appointment}}</span>
Related
Below is the example of my custom directives
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" clickaction="popup"></ind-table>
</div>
How can i put a condition for the property clickaction so that this property could be included only if the value of scope variable contentLength is true. I tried below way.
<div ng-if="activitedTab == 'individual-accounts'">
<ind-table tmodel="choosenInfo.section1.src" ttype="{{activitedTab}}" ng-if="contentLength" clickaction="popup"></ind-table>
</div>
But if the value of contentLength become false then entire section is not displayed. I just want to exclude clickaction property if the value of contentLength is false.
Remove the ng-if condition from the custom directive and use the ternary operator as-
clickaction="contentLength > 0 ? popup : '' "
I have a situation where I have to add class according to the condition and the ng-class is working according to it even the condition in the ng-class is true.
<ul id="" class="clowd_wall" dnd-list="vm.cardData[columns.id].data"
dnd-drop="vm.callback(item,{targetList: vm.cardData[columns.id].data, targetIndex: index, event: event,item:item,type:'folder',eventType:'sort','root':'folder',current_parent:'folder'})" ng-model="vm.cardData[columns.id].data">
<div class="emptyCol" ng-if="vm.cardData[columns.id].data.length==0">Empty</div>
<li class="dndPlaceholder"></li>
<li class="cont____item" ng-repeat="card in vm.cardData[columns.id].data | orderBy:vm.sort" dnd-draggable="card"
dnd-effect-allowed="move"
dnd-allowed-types="card.allowType"
dnd-moved="vm.cardData[columns.id].data.splice($index, 1)"
dnd-selected="vm.tree.selected = card" ng-class="{emptyCard:card.data.length==0,zoomin:vm.zoomin=='zoomin',emptyCard:!card.data}">
<div class="item" style="height:79%">
<ng-include ng-init = "root = columns.id" src="'app/partials/card.html'"></ng-include>
</div>
</li>
</ul>
ng-class="{'emptyCard': (!card.data || !vm.cardData[columns.id].data.length),'zoomin':(vm.zoomin=='zoomin')}">
Seems like you want to use vm.cardData[columns.id].data.length instead of card.data.length
Your question is not clear as don't know what card.data will contain and ".data" will be present for each iteration
If it is array then this will work "card.data.length" and if there is no "data" key in "card" then ".length" will through error i.e. if card.data itself undefined then it will not have "length" property.
Try to add condition in ng-class one by one then you will be able to figure out which condition is causing problem.
Made some small change
ng-class="{emptyCard: card.data.length==0 || !card.data,zoomin: vm.zoomin=='zoomin'}"
If you have multiple expression, try old fashioned, if it looks best:
Controller:
$scope.getcardClass = function (objCard, strZoomin) {
if (!card.data) {
return 'emptyCard';
} else if (strZoomin =='zoomin') {
return 'zoomin';
} else if (card.data.length == 0) {
return 'emptyCard';
}
};
HTML:
ng-class="vm.getcardClass(card, vm.zoomin)"
NOTE: Replace vm with your controller object.
I want to check whether element displayed or not depends upon ng-if condition,
<div id="discount_percent" ng-if="data.isDiscount">
<div id="dis_available"> Discount: {{data.discount}} % </div>
</div>
I want to check if data.isDiscount is true than div "discount_percent" & dis_available should display.
Note: div "discount_percent" and "dis_available" won't be present in DOM if data.isDiscount is false.
I did following way, but I'm not fully satisfied with my solution.
var discountPercentId = element(by.id('discount_percent'));
discountPercentId.isPresent().then(function (present){
if(present){
expect(discountPercentId.evaluate("data.isDiscount")).toBeTruthy();
expect(discountPercentId.element(by.id("dis_available")).isDisplayed()).toBeTruthy();
}
});
Any better approach to do? If condition true than check its availability!!!
try this:
var elem = element(by.css('[ng-if="data.isDiscount"]'));
elem.isPresent().then(function(fnct){
if(fnct){
//do whatever
}
else{
//do something else
}
});
also, I am not sure, but you might want to get the value of data.IsDiscount first. You can get the value of this with the following function:
elem.getAttribute('value').then(function(value) {
//do something with the value
});
I am using ng-show in below html code:
<span ng-show="show_notif_count=1" class="m-alert" id="notif_count">{{notif_count}}</span>
js code:
$scope.show_notif_count = 0;
$http.get('count/',{headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.success(function(response)
{
console.log($scope.show_notif_count);
if(response>2)
{
$scope.show_notif_count = 1;
console.log(response);
$scope.notif_count = response;
}
});
The problem is ng-show never hides the span and it always keeps on showing. I have tried using "==" instead of "=" and also other values for "show_notif_count" but either it always shows up or always keeps hiding. what could be wrong with above code?
show_notif_count=1 is set value for variable not to compare.
Update:
<span ng-show="show_notif_count=1" class="m-alert" id="notif_count">{{notif_count}}</span>
To:
<span ng-show="show_notif_count === 1" class="m-alert" id="notif_count">{{notif_count}}</span>
Note: It will hide when response <= 2, please check response again.
I have this in my view:
<div>
<select ng-model="chartType" ng-change="AnalyticsChartTypeChanged(chartType)"
ng-init="chartType='Data grid'">
<option value="Data grid">Data grid</option>
<option value="Histogram">Histogram</option>
</select>
{{chartType}}
<br>showAnalyticsDataGrid == {{showAnalyticsDataGrid}}
<br>showAnalyticsHistogram == {{showAnalyticsHistogram}}
<div ng-show="{{showAnalyticsDataGrid}}">
<p>Data grid goes here</p>
</div>
<div ng-show="{{showAnalyticsHistogram}}">
<p>Histogram goes here</p>
</div>
and the ng-chnage funtion is
$scope.AnalyticsChartTypeChanged = function(chartType)
{
switch (chartType)
{
case 'Data grid': $scope.showAnalyticsDataGrid = true;
$scope.showAnalyticsHistogram = false;
console.log('Show analytics data grid');
break;
case 'Histogram': $scope.showAnalyticsDataGrid = false;
$scope.showAnalyticsHistogram = true;
console.log('Show analytics histogram');
break;
}
}
When I alernately select each of the options, the debug text updates correcrly:
Data grid
showAnalyticsDataGrid == true
showAnalyticsHistogram == false
and
Histogram
showAnalyticsDataGrid == false
showAnalyticsHistogram == true
BUT, it constantly shows the Data grid DIV and never the Historgram DIV.
Obviouly I am making an extermely simple mistake, but I just can't see it :-(
With ng-show, you give it an expression and it evaluates it for you. What you're trying to do here is evaluating the expression by using the double curly braces{{}}, which doesn't make sense. If you simply remove those double curly braces and use the ng-show like this:
ng-show="showAnalyticsDataGrid"
it will work just fine.
Also, remember that those 2 variables aren't being initialized so when the view loads there will be no div shown by default, but you can fix that with an ng-init.
Here's a fiddle. http://jsfiddle.net/5DMjt/5248/
You don't use {{}} interpolation in ng-show. Like many other directives it directly evaluates expressions
Change
<div ng-show="{{showAnalyticsHistogram}}">
To
<div ng-show="showAnalyticsHistogram">