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!
2 answers
solution1
2 ACCPTED 2016-09-22 08:09:27
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>
solution2
1 2016-09-22 08:22:48
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.