在AngularJs中動態更改按鈕文本

我正在使用AngularJS，CSS和HTML。在AngularJs中動態更改按鈕文本

以下是我正在嘗試執行的操作：基於某個函數isPublished()的輸出，某個按鈕被禁用。我需要在按鈕上方懸停文字，例如當按鈕被禁用時，將文字懸停在文本上可能是「I'm disabled」，並且當它未被禁用時，懸停在文本上的可能是「I'm not disabled」。

代碼：

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

與上面的代碼，我得到按鈕上的懸停文本（禁用時，當未禁用）。但問題是，文本是相同的= Im not disabled。我需要2個不同的文本。另外我嘗試ng-mouseover，但由於某種原因，它不工作，所以我去了title屬性。

任何人都可以幫我解決這個問題嗎？任何幫助表示讚賞！謝謝！

來源

2016-09-22 Nikhil Hegde

看來，要動態或一些行動改變標題（懸停標題），可以做specificying title屬性爲ng-attr-title="{{ message }}"

您可以在ngDisabled功能更改標題。

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

來源

2016-09-22 08:09:27

$ isPublished（）函數中的scope.message非常棒！謝謝！ –

@NikhilHegde很高興看到它幫助你:) –

你可以嘗試這樣的事情。

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

看看工作plunker。

來源

2016-09-22 08:22:48

在AngularJs中動態更改按鈕文本

回答

相關問題