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'">
Related
I have set of buttons, I used ng-repeat. I would like to have pressed first button after load page
I thought about ng-init but I don't know how to use reference to first button..
You can use $first to return a boolean that is true if the element is the first in the array, and then put some logic in there that will check for that along the lines of
if($first){
//do something
}
or something like
ng-class="$first ? conditionA : conditionB"
if you want to conditionally set CSS
https://docs.angularjs.org/api/ng/directive/ngRepeat
You can achieve what you need with ng-init like this:
<td ng-repeat="item in items">
<a href="">
<button type="button" ng-click="onClick($index)" ng-init="$first && onClick($index)">{{item.title}}</button>
</a>
</td>
onClick function will be called only for the first button
see working demo here: demo
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've been struggling with a ng-hide issue in combination with using ui-router. Simple app. Index.html shows some data via the "notes" route, you click on "detail" and you go to the sub route "notes.note" to view the detail just below the other records. The "detail" html has a "Save" & "Cancel" button.
Now there is an "Add New" button when you are not viewing the detail with the attribute ng-hide="HideAddNew". "HideAddNew" is a $scope variable in the controller. When I click "detail" on a row I have this ng-click="toggleAddNew()" on the link which in turn calls this
$scope.toggleAddNew= function()
{
$scope.HideAddNew=($scope.HideAddNew ? false : true);
}
That works perfectly, my detail shows and my "Add New" button has disappeared. Now on the detail when I click "Cancel" it fire off the ng-click="hideData()" which calls the function:
$scope.hideData=function()
{
$scope.toggleAddNew();
$state.go('notes');
}
And now my "Add New" has disappeared even though the variable is set to false, i.e. Don't hide. I've tried $timeout in that "hideData" function and in the "toggleAddNew" function. I've tried putting "$scope.toggleAddNew();" after the "$state.go('notes');" too. I don't want to resort to manually adding and removing classes. AngularJS ver: v1.3.15 , ui-router ver: v0.2.13 Thanx all :)
EDIT
Would the below work Tony?
<button ng-if="HideAddNew" ng-click="SelectRoute('notenew')" class="btn btn-primary">
<span class="glyphicon glyphicon-plus -glyphicon-align-left"></span>Add New</button>
Perhaps you could simplify and use ng-switch instead.
Something like this:
<ul ng-switch="expression">
<li ng-switch-when="firstThing">my first thing</li>
<li ng-switch-when="secondThing">my second thing</li>
<li ng-switch-default>default</li>
</ul>
Alternatively, maybe you could use ng-if or ng-show instead of ng-hide, eg:
<p ng-if="HideAddNew">it's here!</p>
<p ng-if="!HideAddNew">it's not here.</p>
Edit
If I understand what you're trying to achieve exactly, I would use ng-show with an ng-click:
Controller:
$scope.addNew = false;
View:
<button ng-show="!addNew" ng-click="addNew = true">Add New</button>
<button ng-show="addNew" ng-click="save()">Save</button>
<button ng-show="addNew" ng-click="addNew = false">Cancel</button>
Example
Sorry for not being specific, but I'm having a blackout and am desperate.
Have been struggling for 2 days now to find the logic to do the following:
every item has a 'inCart' value. if it's 0, it's not in there, if it's below 7, it's in one of 6 'slots' depending on the value.
now i have buttons that assign each item to a value in inCart.
but if one of the items has a value in it that is 4, then I obviously don't want all the items to show a button that will assign it to 4.
<tr ng-repeat="x in myItems">
<a ng-repeat="slot in [1,2,3,4,5,6]" ng-click="addToCart(x._id, slot)"
class="btn btn-primary {{x.inCart != '0' ? 'disabled' : ''}}">
{{slot}}
</a></tr>
Thinking about it logically I know my mistake: i only look if the current item is in the cart, and if it is then it disables the button. How do I look at all the items in the cart, and if one of them is for example 4, then all the buttons that assign an a value 4 to inCart are disabled, so that I won't have multiple items with the same location inCart.
based on the approach I can fix this I am pretty sure I can make everything work better then how it is now, it's just that I can't even figure this out so let alone the more detailed issues.
You can use the ngClass directive
You can evaluate a expression with ng-class and if it's true you can apply a certain class. If not, then the class won’t be applied.
<button ng-class="{'disabled': expression}">
If you use an actual button, you can make use of ngDisabled:
<input type="button" ng-repeat="slot in [1,2,3,4,5,6]"
ng-click="addToCart(x._id, slot)"
class="btn btn-primary"
ng-disabled="x.inCart !== '0'" value="{{slot}}" />
You could call a function to check if the slot is available.
Controller
// return the slots already used
var slotsUsed = $scope.myItems.map(function (i) {return i.inCart;}).filter( function(s) { return s > 0;});
$scope.slotAvailable = function(s) {
return slotsUsed.indexOf(s) == -1;
}
View
<tr ng-repeat="x in myItems">
<td>
<a ng-repeat="slot in [1,2,3,4,5,6]"
class="btn btn-primary"
ng-click="addToCart(x._id, slot)"
ng-class="{'disabled': x.inCart != '0' || !slotAvailable(slot)}">
{{slot}}
</a>
</td>
</tr>
There's a directive designed specifically for this: ngDisabled
https://docs.angularjs.org/api/ng/directive/ngDisabled
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