I want to change class of button according to condition. Here is code:
<button class="btn btn-xs" type="button" ng-class="(oppdetail.status=='approved')?'btn-success':(oppdetail.status=='pending')?'btn-warning':(oppdetail.status=='rejected')?'btn-danger':'btn-warning'">{{oppdetail.status|ucWordFilter}}</button>
I don't know, is the good way for ng-class?
This is probably the easiest way:
ng-class="{'class1':<condition1>, 'class2': <condition2>}"
Related
I have this row:
<a class="btn btn-default btn-xs" ng-click="list.showReview = list.showReview == $index ? -1 : $index; getValues(object.Id); "><i class=" glyphicon glyphicon-list-alt"></i></a>
I want getValues() method in controller to be called only if list.showReview
variable true.
Any idea how can I implement it?
P.S. can I use if else statement in HTML ?
Assume list.showReview is a boolean variable. Then you can try this
<a class="btn btn-default btn-xs" ng-click="list.showReview && getValues(object.Id)"><i class=" glyphicon glyphicon-list-alt"></i></a>
You could make it a button and apply the ng-disabled directive. If list.showReview is true, then ng-disabled will make the button disabled, see below.
<button class="btn" ng-disabled="list.showReview" ng-click="getValues(object.Id); "><i class=" glyphicon glyphicon-list-alt"></i></button>
In general, I would suggest moving your logic for whether or not getValues() is executed inside your controller. You'll end up polluting your html templates if you continue to put excess logic inside them.
i want to change class btn-white to btn-primary for the selected Button
$scope.SelectedCombination = function (combinationId) {
$scope.selectedCombination =combinationId;
};
html
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId)" type="button">{{combination.name}}</button>
use ng-class.don't use any javascript function to set css.
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);clicked=true;" ng-class="{btn-primary:clicked}" type="button">{{combination.name}}
</button>
or you can use best approach:
<button ng-repeat="combination in combinations" class="btn btn-white" ng-model="x" value="{{combination.combinationId}}" ng-click="SelectedCombination(combination.combinationId);" ng-class="{'btn-primary':selectedCombination==combination.combinationId}" type="button">{{combination.name}}
</button>
see plunker
There is something called Ng-Class. Ng-class,allow you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.class
I have two buttons that are both wired to ng-click event, but with different parameters.
<button type="button" class="btn btn-default btn-large btn-block"
ng-click="makePick({{item.EventId}}, {{eventSchedule.MemberId}},
{{item.HomeId}})">
<button type="button" class="btn btn-default btn-large btn-block"
ng-click="makePick({{item.EventId}}, {{eventSchedule.MemberId}},
{{item.AwayId}})">
And both are calling the same method:
$scope.makePick = function (eventId, memberId, teamWinSelId) { //... };
When I kick up the project in my browser, I get the following error:
Syntax Error: Token 'item.EventId' is at column {2} of the expression [{3}] starting at [{4}].
Not sure whats going on, is it a matter of having the same method call on two different buttons? Not too sure whats going wrong. I'd appreciate some guidance.
When using ng-click you omit the {{}} for view variables, they're already being processed within the directive:
<button type="button" class="btn btn-default btn-large btn-block" ng-click="makePick(item.EventId, eventSchedule.MemberId, item.HomeId)">
<button type="button" class="btn btn-default btn-large btn-block" ng-click="makePick(item.EventId, eventSchedule.MemberId, item.AwayId)">
you dont need to use curly braces in params, since ng-click processes itself this for you. curly braces are not required for any of ng prefix directive
for example
ng-click="makePick(item.EventId,eventSchedule.MemberId,
item.AwayId)
I have this html code and if the "modalOptions.actionButtonText" contains "delete" then I need to display danger button instead of primary button
Html Code:
<button class="btn btn-primary" data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
I know we can use "ng-if" to check the condition but is there any way I can use indexOf in angularjs or something else to achieve this?
Looks dirty, but it works.
See working demo
<button class="btn"
data-ng-class="{'btn-primary': modalOptions.actionButtonText.indexOf('delete') == -1,
'btn-danger': modalOptions.actionButtonText.indexOf('delete') > -1}"
data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button>
The ngClass directive lets you add/remove classes based on a boolean expression. So here, I am adding btn-primary if "delete" isn't found in the button text and btn-danger if it is.
I wanted something similar, but wrote it in shorthand:
<li ng-class="haystack.indexOf('needle') != -1 ? 'active' : 'inactive'">
I am testing angularJS and ui-bootstrap tooltips :
http://angular-ui.github.io/bootstrap/#/tooltip
What I want to achieve is a tooltip with some working buttons inside.
I have tried :
<input type="text" value="{{activity.name}}"
tooltip-html-unsafe='<button class="btn btn-primary btn-mini" ng-click="addChild(activity)">+</button>
<button class="btn btn-danger btn-mini" ng-click="remove(activity)">X</button>
<button class="btn btn-danger btn-mini" ng-click="removeChildren(activity)" ng-show="activity.children.length > 0">X children</button>'
tooltip-trigger="focus"
tooltip-placement="right" />
Which is ugly and does not work. The buttons are rendered but do not execute the 'ng-click'.
Is there some way I can tell the tooltip to fetch a partial and keep the ng-click functional ?
Tooltips that would contain "live" HTML (with AngularJS directives working etc.) are not supported in the current (0.5.) version of http://angular-ui.github.io/bootstrap/#/tooltip
You might want to open a feature request for this in https://github.com/angular-ui/bootstrap/issues?state=open