对于一个残疾人按钮，设定提示 [英] Set tooltip for a disabled button
问题描述
请查看 HTTP我在plunkr code例如：// plnkr。 CO /编辑/ 9dyBVZh67sxmIqUQB50S？p = preVIEW
我有4个按钮，其中两个按钮被禁用由于条件。
我希望能够显示在两个按钮被禁用，将说：测试itemName2不可用第一个残疾人按钮和工具提示测试itemName4不可用第二次残疾人按钮，并没有提示在另外两个被启用。
这将是可能的吗？我一直在玩弄周围的NG-ATTR标题如示例中看到，但被卡在寻找解决我想要什么。
任何帮助将大大AP preciated ..
HTML
＆LT;身体GT;
＆LT; DIV NG控制器= ItemsController＆GT;
＆LT; H3＆GT;测试与LT; / H3 GT＆;
＆LT; DIV CLASS =行＆GT;
＆LT; DIV CLASS =COL-MD-4＆GT;
＆LT; DIV CLASS =面板面板默认＆GT;
＆LT; UL类=列表组＆GT;
＆LT;按钮NG-禁用=isDisabled（item.name）NG-ATTR标题={{item.name}}级=BTN BTN-主要NG点击=选择（项目）NG-重复=，在itemDetails项目＆GT; LT {{item.name}}; /按钮＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
的script.js
VAR myItemsApp = angular.module（'myItemsApp'，[]）;myItemsApp.factory（'itemsFactory'，['$ HTTP'，函数（$ HTTP）{
VAR itemsFactory = {
itemDetails：功能（）{
返回$ HTTP（
{
网址：mockItems.json
方法：GET，
}）
。然后（功能（响应）{
返回response.data;
}）;
}
};
返回itemsFactory;}]）;
myItemsApp.controller（'ItemsController'，['$范围，itemsFactory'，函数（$范围，itemsFactory）{
VAR承诺= itemsFactory.itemDetails（）; promise.then（功能（数据）{
$ scope.itemDetails =数据;
//console.log(data）;
}）;
$ scope.select =功能（项目）{
$ scope.selected =项目;
}
$ scope.selected = {};
$ scope.isDisabled =功能（名称）{ 如果（名称==测试ITEMNAME 2||名==测试ITEMNAME 4）
{
返回true;
} }}]）;
您可以使用：
＆LT; DIV CLASS =工具提示包装NG重复=冠军，在itemDetails项目={{item.name +（isDisabled（item.name）'是不可用'：''）}}＆GT;
＆LT;按钮NG-禁用=isDisabled（item.name）级=BTN BTN-主要NG点击=选择（项目）＆GT; {{item.name}}＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
链接演示： 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屋！
