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";
}

＆＃13;

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

＆＃13;

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

＆＃13;

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中动态更改按钮文本

2 个答案: