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.
Related
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>}"
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)
Having trouble making ng-disabled and ng-class work properly.
ng-disabled
A variable on the scope tracks how many rows have been selected on a table, and contains a list of rows ids. The button should be disabled when the $scope.selected list is empty.
{{selected}} will show [27982,27983,27984]
<button type="button" class="btn btn-primary" ng-model="scope.selected"
ng-disabled="" ng-click="invokeSaleModal()">Purchase</button>
ng-class
$scope.purchase.paid is a boolean, holding either true or false. I am trying to apply the Bootstrap text classes to make the line green or red. Nothing seems to work, even though the purchase.paid variable is correct.
<h4 ng-model="purchase.paid" ng-class="{true: success, false: danger}">
{{purchase.card_message}}
</h4>
EDIT
I tried changing the tag from h4 to a but no luck. Here is the modified code
<p ng-class="{true: 'success', false: 'danger'}[purchase.paid]">
{{purchase.card_message}} - {{purchase.paid}}
<p>
Which displays this
Purchase successful - true
EDIT2
Thank you to #Josep It turns out I was using the wrong Bootstrap CSS class names.
<p ng-class="{true: 'text-success', false: 'text-danger'}[purchase.paid]">
{{purchase.card_message}} - {{purchase.paid}}
<p>
ng-disabled
<button type="button" class="btn btn-primary"
ng-disabled="selected.length==0"
ng-click="invokeSaleModal()">Purchase</button>
ng-class
<h4 ng-class="{true: 'success', false: 'danger'}[purchase.paid]">
{{purchase.card_message}}
</h4>
Update
Since it seems that the OP is having some issues making the ng-class work, I've made this example
I want to execute a function when the value of the select element changes (the select element in angular-strap is html tag)
My HTML:
<button type="button" class="btn btn-default" ng-model="selectedCriteria" data-html="1" ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
My JS:
$scope.selectedCriteria = "Location";
$scope.selectChoices = [{'value':'Location','label':'<i class=\'fa fa-map-marker\'></i> Location'},
{'value':'Age','label':'<i class=\'fa fa-male\'></i> Age'}];
I tried putting an ng-click directive with a function in the controller but it captures the value of the current selected value on click not when the element changes
Thanks
There are a couple of options one is using ngChange Reference
The other is using $watch. See the $watch section of the scopeapi reference
An example using watch (this would be in your controller)
$scope.$watch('selectedCriteria', function() {
$scope.SomeFunction();
});
An example using ngChange
<button type="button" class="btn btn-default"
ng-change="SomeFunction()"
ng-model="selectedCriteria" data-html="1"
ng-options="choice.value as choice.label for choice in selectChoices" bs-select>
Action <span class="caret"></span>
</button>
I've got a button linked to a UI Bootstrap
Collapse directive if I click on it
the script show a form to reply a comment.
when the form is showed I want to hide the button
but I've got a strange behavior
this doesn't work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
this work:
<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
<span class="glyphicon glyphicon-share-alt"></span> Reply
</a>
and I don't really know why !
Can you enlighten me, please ?
This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.
Try using toggle() function declared on controller level for ng-click
$scope.toggle = function () {
$scope.isCollapsed = !$scope.isCollapsed;
};
Consider using the rule:
Treat $scope as read only in templates.