在AngularJs中動態更改按鈕文本
[英]Change button text dynamically in AngularJs
問題描述
我正在使用AngularJS，CSS和HTML。
這是我要執行的操作：根據某個函數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屬性。
誰能幫我這個忙嗎？ 任何幫助表示贊賞！ 謝謝！
2 個解決方案
解決方案1
2 已采納 2016-09-22 08:09:27
似乎您想動態更改標題（懸停標題）或執行某些操作，可以通過將標題屬性指定為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>
解決方案2
1 2016-09-22 08:22:48
您可以嘗試這樣。
<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>
看一下工作中的矮人 。
動態更改文本顏色AngularJS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.