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
Solution 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>Solution 2:
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.
Post a Comment for "Change Button Text Dynamically In AngularJs"