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!

Mohit Tanwani · Accepted Answer · 2016-09-22T08:22:35.773

2

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>

edited Sep 22 '16 at 08:22

answered Sep 22 '16 at 08:09

Mohit Tanwani

6,608
2
14
32

$scope.message inside the isPublished() function worked great! Thanks! – Nikhil Hegde Sep 22 '16 at 09:19
@NikhilHegde Glad to see that it helped you :) – Mohit Tanwani Sep 22 '16 at 09:33

score 1 · Answer 2 · answered Sep 22 '16 at 08:22

You can try something like this.

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

Have a look into working plunker.

Change button text dynamically in AngularJs

2 Answers2

Linked