在 AngularJs 中动态更改按钮文本 [英] Change button text dynamically in AngularJs

问题描述

我正在使用 AngularJS、CSS 和 HTML.

这是我想要做的:根据某个函数 isPublished() 的输出，按钮被禁用.我需要按钮上的悬停文本，例如当按钮被禁用时，悬停在文本上的可能是Im disabled"，当它没有被禁用时，悬停在文本上可能是I我没有被禁用".

代码:

<input title="Im disabled" type="button" class="btn btn-primary"value="发布" ng-click="publishFingerPrint()" ng-hide="isEdit"ng-disabled="isPublished()"/></span><脚本>$(函数(){$(".btn btn-primary:ng-disabled").wrap(function() {return '<span title="' + $(this).attr('title') + '"/>';});});

使用上面的代码，我得到了按钮上的悬停文本(禁用和未禁用时).但问题是文字是一样的=我没有被禁用.我需要2个不同的文本.我也试过 ng-mouseover 但由于某种原因它不起作用所以我选择了 title 属性.

谁能帮我解决这个问题?任何帮助表示赞赏！谢谢！

解决方案

看来您想动态更改标题(悬停标题)或在某些操作上更改，可以将标题属性指定为 ng-attr-title="{{ message }}"

您可以在 ngDisabled 函数中更改标题.

$scope.isPublished = function(){$scope.message = "我被解雇了";}

var app = angular.module('myApp', []);功能 ctrl($scope) {$scope.message = "旧标题";$scope.changeTitle = function(){$scope.message = "新标题";};}

<script src="http://code.angularjs.org/1.2.23/angular.min.js"><;/脚本><div ng-app="myApp" ng-controller="ctrl"><div ng-attr-title="{{ message }}">悬停在我身上</div><br/><br/>{{信息}}<button ng-click="changeTitle()">更改悬停标题</button>

I am working with AngularJS, CSS and HTML.

Here's what I'm trying to do: A button gets disabled based on the output of a certain function isPublished(). I need the hover text over the button like When the button is disabled the hover over text could be "I'm disabled" and when it is not disabled the hover over text could be "I'm not disabled".

Code:

<span>
<input title="Im disabled" type="button" class="btn btn-primary" 
        value="Publish" ng-click="publishFingerPrint()" ng-hide="isEdit"
        ng-disabled="isPublished()"/>
</span>

<script>
$(function () {
    $(".btn btn-primary:ng-disabled").wrap(function() {
        return '<span title="' + $(this).attr('title') + '" />';
    });
});
</script>

With the above code, I get the hover text on the button (when disabled and when not disabled). But the problem is that the text is the same = Im not disabled. I need 2 different texts. Also I tried ng-mouseover but for some reason it is not working so I went with title attribute.

Can anyone help me out with this? Any help is appreciated! Thanks!

解决方案

It seems that you want to change the title (hover title) dynamically or on some action, that can be done specificying title attribute as ng-attr-title="{{ message }}"

You can change the title in your ngDisabled function.

$scope.isPublished = function(){
   $scope.message = "I'm disalbed";
}

var app = angular.module('myApp', []);
function ctrl($scope) {
    $scope.message = "Old Title";
    $scope.changeTitle = function(){
      $scope.message = "New Title";
    };
}

<script src="http://code.angularjs.org/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
    <div ng-attr-title="{{ message }}">Hover me</div>
    <br/><br/>
    {{message}}
    <button ng-click="changeTitle()">Change Hover Title</button>
</div>

这篇关于在 AngularJs 中动态更改按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！