I have this two ng-class sentences. How can I mix them into one:
ng-class="['step-0' + main.activeConnectStep]"
ng-class="{'active': main.activeConnectStep > 0 }"
ng-class="{'active': main.activeConnectStep > 0, 'step-0{{main.activeConnectStep}}': 1}"
Using array notation:
ng-class="['step-0' + main.activeConnectStep, main.activeConnectStep > 0 ? 'active' : '']"
Related
<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] : ''
}
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>
I have 2 divs with an ng-class applied to evaluate a $scope property, called {{stepNumber}}.
<div id="step0" class="col-xs-2" ng-class="{{stepNumber}} == 0 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' ">
<div id="step1" class="col-xs-2" ng-class="{{stepNumber}} == 1 ? 'active' : {{stepNumber}} > 1 ? 'complete' : 'disabled' ">
The first time the page is loaded, {{stepNumber}} is 0,
1st div gets class active, 2nd div gets class disabled.
When I click a button that uses ng-click to increment the property value by doing $scope.stepNumber++;, the divs do not reevaluate the ng-class expression.
{{stepNumber}} is now 1 but the 1st div class is still active, 2nd div class is still disabled
How can I get the ng-class to reevaluate the expression?
That's not how ng-class works. Read its documentation carefully. The correct code would be:
ng-class="{active: stepNumber == 0, complete: stepNumber > 1, disabled: stepNumber != 0 && stepNumber <= 1}"
or
class="col-xs-2, {{stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled' }}"
or
ng-class="stepNumber == 0 ? 'active' : stepNumber > 1 ? 'complete' : 'disabled'"
I am creating pagination buttons that call specific content through custom angular directives. These buttons are created via ng-repeat.
<div class="margin-less row">
<a ng-repeat="i in getNumber(9)" href="#/5-4-9_novena?day={{$index + 1}}">
<div class="small-1 panel-default columns pagination-panel" ng-if { ng-class="current: $index + 1 == date.weekday"}>
<h4 class="panel-title ">{{$index + 1}}</h4></div>
</a>
</div>
I attempted to use ng-if to add a class "current" on the pagination link that matches the link whose index matches {{date.weekday}}. However, to my disappointment I couldn't get it to add the class when the index matched the scope. Am I missing anything?
About ng-class you could use something like
<div class="small-1 panel-default columns pagination-panel" ng-class="{ current: $index + 1 == date.weekday}">
You don't need an ng-if to achieve that. Also, the ng-if syntax is completely different.
change ng-if { ng-class="current: $index + 1 == date.weekday"}
to
data-ng-class="{current: $index + 1 === date.weekday}"
For this case it's better to use ng-class:
ng-class="{current: $index == selected}"
For Both condition ng-if and ng-class
Change This:
<div class="small-1 panel-default columns pagination-panel" ng-if { ng-class="current: $index + 1 == date.weekday"}>
To:
<div class="small-1 panel-default columns pagination-panel" ng-if="$index + 1 == date.weekday" ng-class="{'current': $index + 1 == date.weekday }">
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'}">