Question

如何在angular.js中有条件地应用标题

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

如果status等于true，那么我想将标题显示为 Create else Delete 。

对于课程，我可以应用

等条件

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

并在控制器中

$scope.isActive = true;

或

$scope.isActive = false;

我如何在标题中做同样的事情？

我尝试过类似的事情：

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

Answer 1

就这样做

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

Answer 2

我遇到了同样的问题，但我希望我的解决方案更具动态性。这就是我想出的：

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));

    }
}});

然后您可以使用它：

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

Answer 3

要避免直接绑定到HTML Element属性，可以使用以下命令：

<span [attr.title]="item.status ? 'create' : 'delete'" [ngClass]="'check-' +  item.status"></span>

Answer 4

对于仍在尝试找出答案的人：

使用ng-attr-title="{{ item.status ? 'create' : 'delete'}}"。（在Angular 1.1.4中引入）

查看here了解更多详细信息。

Answer 5

title="{{ type.enabled ? ('Enabled  '+type.name) : ('Disabled '+ type.name+) }}"

这可能会对你有帮助。

Answer 6

如果您使用的是最新版本的angular，则可以这样实现

<span [title]="item.status ? 'create' : 'delete'" [ngClass]="'check-' +  item.status"></span>

我如何有条件地在角js中应用标题

6 个答案: