CODEWITHSUNDEEP
javascripthtmlangularjsscopeangularjs-ng-disabled
Nikhil Hegde
Nikhil Hegde

Reputation: 341

Change button text dynamically in AngularJs

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!

Upvotes: 2

Views: 9388

Answers (2)

Umakanta Behera
Umakanta Behera

Reputation: 265

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.

Upvotes: 1

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

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>

Upvotes: 2

Related Questions