Change button text dynamically in AngularJs

Question

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!

Answer 1

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>