在AngularJs中动态更改按钮文本答案

【问题标题】：Change button text dynamically in AngularJs在AngularJs中动态更改按钮文本
【发布时间】：2017-01-30 16:17:40
【问题描述】：

我正在使用 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 属性。

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

【问题讨论】：

标签： javascript html angularjs scope angularjs-ng-disabled

【解决方案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>

【讨论】：

isPublished() 函数中的 $scope.message 效果很好！谢谢！
@NikhilHegde 很高兴看到它对您有所帮助:)

【解决方案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。

【讨论】：