Question

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?

Was it helpful?

Solution

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.

OTHER TIPS

I wanted something similar, but wrote it in shorthand:

<li ng-class="haystack.indexOf('needle') != -1 ? 'active' : 'inactive'">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top