在 AngularJs 中动态更改按钮文本

Question

我正在与 AngularJS、CSS 和 HTML 合作。

这是我正在尝试做的事情：按钮根据某个函数的输出被禁用 isPublished()。我需要按钮上的悬停文本，例如当按钮被禁用时，悬停在文本上的文本可能是“I'm disabled”，当它未被禁用时，悬停在文本上的文本可能是“I'm not disabled”。

代码：

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

Answer 2

您可以尝试这样的操作。

<body ng-app="app" ng-controller="ctr">
       <button type="button" class="btn btn-primary" ng-click="disable = !disable;changeTitle();">Click</button>
       <input title="{{title}}" type="button" class="btn btn-primary" value="Publish"  ng-disabled="disable"/>
      <script>
        angular.module('app',[]).controller('ctr',function($scope){
          $scope.changeTitle = function(){
            $scope.title = $scope.disable ? 'I m disabled' : 'I m not disabled';
          }
        })
      </script>
  </body>

看看工作 plunker。

在 AngularJs 中动态更改按钮文本

Change button text dynamically in AngularJs

html

javascript

scope

angularjs

angularjs-ng-disabled