Home » Angularjs » How can i conditionally apply title in angular js

How can i conditionally apply title in angular js

Posted by: admin November 30, 2017 Leave a comment

Questions:

How can I conditionally apply title in angular.js

<span title=" Create " class="check-{{ item.status }}"></span>

If status equals to true, then I want to show title as Create else Delete.

For class I can apply conditions like

ng-class="{true: 'active'}[isActive]

and in controller

$scope.isActive = true;

or

$scope.isActive = false;

How can I do the same in title?

I tried something like:

title = " item.status = true | 'create' "
Answers:

Just do this

<span title="{{ item.status ? 'create' : 'delete'}}" class="check-{{ item.status }}"></span>

Questions:
Answers:

I had the same problem but I wanted to have my solution more dynamic. This is what I came up with:

directives.directive('myStatus', function() {

var getStatusClass = function (currentStatus) {
    switch (currentStatus) {
        case 'U':
            //a defined css class
            return "unassigned-background";
        ...
        default :
            return "error";
    }
};

var getStatusTitle = function (currentStatus) {
    switch (currentStatus) {
        case 'U':
            //some string you want to use
            return "Unassigned. Inactive";
        ...
        default :
            return "error";
    }
};

return {
    restrict: 'E',
    template: '<span>{{status}}</span>',
    scope: {
        status: '@status' //<-- take note that this is a one-way binding!
    },
    link : function (scope, element, attributes) {
        element.addClass(getTerminalStatusClass(scope.status));
        element.attr("title", getTerminalStatusTitle(scope.status));

    }
}});

Then you can use this like:

<my-status status={{myScopeVariable}}></my-status>