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'}">
Related
Building a table I am deep within nested ng-repeats.
Depending on a scope variable I have to display/use a different field from my objects.
Is there a shorter way to adress the decision/field call in a way that could look like 'from now on use expression as myVar'?
Currently my code looks very ugly and basically always repeating a pattern like direction==='sources' ? connection.target.X : connection.source.X
As I am already pretty deep I cannot simply rearrange my array in Controller first.
This is just a small part of it:
<strong>{{direction==='sources' ? connection.target.name : connection.source.name}}</strong>
<br>
<a ng-click="goToEntityUsingReport(direction==='sources' ? connection.target.id : connection.source.id)">
<i class="fa fa-plus-square-o"></i>
</a>
<a ng-show="hasFurtherConnections(direction==='sources' ? connection.target.id : connection.source.id)" ng-click="setEntityFocus(direction==='sources' ? connection.target.id : connection.source.id)">
<i class="fa fa-chevron-circle-right"></i>
</a>
{{getEntityTotal(direction==='sources' ? connection.target.id : connection.source.id) | acCurrency}} total)
You can assign this expression on the return statement of a function in your controller in order to look cleaner.
e.g.
$scope.getValueBasedOnProperty(connection, prop) {
if($scope.direction === 'sources') {
return connection.target[prop];
}
else {
return connection.source[prop]
}
}
Then in the view:
<strong>{{getValueBasedOnProperty(connection, 'name')}}</strong>
<br>
<a ng-click="goToEntityUsingReport(getValueBasedOnProperty(connection, 'id')">
<i class="fa fa-plus-square-o"></i>
</a>
<!-- And goes on ... -->
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
Why doesn't this work.
<li ng-if="!area"></li>
Feels a bit illogical since
<li ng-if="area"></li>
works just fine.
'area' is defined in scope as true/false
Any workarounds for this? I would prefer not to use ng-show/ng-hide since both of them renders items in DOM.
use this
ng-if="area == false"
OR
ng-if="area == true"
this may help someone
Use like this
<div ng-if="data.IsActive === 1">InActive</div>
<div ng-if="data.IsActive === 0">Active</div>
Just use for True:
<li ng-if="area"></li>
and for False:
<li ng-if="area === false"></li>
try this:
<div ng-if="$scope.length == 0" ? true : false></div>
and show or hide
<div ng-show="$scope.length == 0"></div>
else it will be hide
-----------------or--------------------------
if you are using $ctrl than code will be like this:
try this:
<div ng-if="$ctrl.length == 0" ? true : false></div>
and show or hide
<div ng-show="$ctrl.length == 0"></div>
else it will be hide
In angular 1, you can use ng-show and ng-hide.In your case, you would use ng-hide. For example:
<li ng-hide="area"></li>
you are not using the $scope
you must use $ctrl.area or $scope.area instead of area
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 }">
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
{{data.company_name}}
</h1>
</div>
What I'd like to do is make it so that if data.company_name hasn't been added through an input field, it shows a placeholder "Company name", how can that be done using angularjs?
You can use ng-if and do something like
<div class="company_name" ng-controller="CompanyName">
<h1 class="left">
<span ng-if="data.company_name === ''">
// Some placeholder
</span>
<span ng-if="data.company_name !== ''">
{{data.company_name}}
</span>
</h1>
</div>
BTW ngIf is a new directive added in v1.1.5 so you might need to upgrade your angular version
See my plunker here : http://plnkr.co/edit/qiN2XshEpay6e6zzhUKP
One way to keep the code clean is to use a filter. This piece of code adds a class to an active tab.
var filters = angular.module('filters');
filters.filter('ie', function(){
return function(v, yes, no){
return v ? yes : no;
};
});
Template
<li class="{{activeTab == 'home' | ie: 'active-class':''}}">
Home
</li>
For Using ng-if, ng-else-if, and ng-else in your project use this:
https://github.com/zachsnow/ng-elif
You can use ng-if condition for the check company name vlaue. Let's take example of
<span ng-if="driver.status_flag == 1">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>
In above example I have added condition status_flag value is 1 then the inside span value will show. Same way with your case you can add statement like
<span ng-if="data.company_name === ''">
<i ngif="{{driver.status_flag}}" class="icon-ok-sign icon-2x link" style="color:#090" href="#" title="Payment received" ></i>
</span>