javascript - 在 AngularJs 中动态更改按钮文本

Question

我正在使用 AngularJS、CSS 和 HTML。

这是我正在尝试做的事情:按钮根据特定函数 isPublished() 的输出被禁用。我需要按钮上的悬停文本，例如当按钮被禁用时，悬停在文本上的文本可能是“我被禁用”，当它未被禁用时，悬停在文本上的文本可能是“我我没有被禁用”。

代码:

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

使用上面的代码，我得到了按钮上的悬停文本(禁用时和未禁用时)。但问题是文本是相同的 = Im not disabled。我需要 2 个不同的文本。我也尝试过 ng-mouseover 但由于某种原因它不起作用，所以我使用了 title 属性。

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

Answer 1

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

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

$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>