设置禁用按钮的工具提示
[英] Set tooltip for a disabled button
本文介绍了设置禁用按钮的工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请在 http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=预览
我有 4 个按钮，其中两个按钮因条件而被禁用.
我希望能够在禁用的两个按钮上显示工具提示，第一个禁用的按钮会显示Test itemName2 不可用"，第二个禁用的按钮显示Test itemName4 不可用"，并且没有工具提示在启用的其他两个之上.
这可能吗?如示例中所示，我一直在玩弄 ng-attr-title，但一直在寻找我想要的解决方案.
任何帮助将不胜感激..
html:
<div ng-controller=ItemsController><h3>测试</h3><div class="row"><div class="col-md-4"><div class="panel panel-default"><ul class="list-group"><button ng-disabled="isDisabled(item.name)" ng-attr-title="{{item.name}}" class="btn btn-primary" ng-click="select(item)" ng-repeat="itemDetails 中的项目">{{item.name}}</button>
Script.js
var myItemsApp = angular.module('myItemsApp', []);myItemsApp.factory('itemsFactory', ['$http', function($http){var itemsFactory ={项目详细信息:函数(){返回 $http({url: "mockItems.json",方法:获取"，}).then(功能(响应){返回 response.data;});}};退货工厂；}]);myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){var promise = itemsFactory.itemDetails();promise.then(函数(数据){$scope.itemDetails = 数据；//console.log(数据);});$scope.select = function(item) {$scope.selected = 项目；}$scope.selected = {};$scope.isDisabled = 函数(名称){if(name == "Test itemName 2" || name == "Test itemName 4"){返回真；}}}]);
解决方案
您可以使用:
<div class="tooltip-wrapper" ng-repeat="item in itemDetails" title="{{item.name + (isDisabled(item.name)?' is not available' : '')}}"><button ng-disabled="isDisabled(item.name)" class="btn btn-primary" ng-click="select(item)">{{item.name}}</button>
链接演示:http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview
Please view my example in plunkr code on http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview
I have 4 buttons in which two buttons are disabled due to a condition.
I want to be able to display a tooltip over the two buttons that are disabled that would say "Test itemName2 is not available" for the first disabled button and "Test itemName4 is not available" for the second disabled button and no tooltip over the other two that are enabled.
Would this be possible? I have been toying around with ng-attr-title as seen in the example but is stuck on finding the solution to what I want.
Any help would be greatly appreciated..
html:
<body>
<div ng-controller=ItemsController>
<h3>Test</h3>
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<button ng-disabled="isDisabled(item.name)" ng-attr-title="{{item.name}}" class="btn btn-primary" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</button>
</ul>
</div>
</div>
</div>
</div>
</body>
Script.js
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "mockItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
//console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
}
$scope.selected = {};
$scope.isDisabled = function(name){
if(name == "Test itemName 2" || name == "Test itemName 4")
{
return true;
}
}
}]);
解决方案
You can use:
<div class="tooltip-wrapper" ng-repeat="item in itemDetails" title="{{item.name + (isDisabled(item.name)?' is not available' : '')}}">
<button ng-disabled="isDisabled(item.name)" class="btn btn-primary" ng-click="select(item)">{{item.name}}</button>
</div>
Link demo: http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview
这篇关于设置禁用按钮的工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
