设置禁用按钮的工具提示答案

【问题标题】：Set tooltip for a disabled button设置禁用按钮的工具提示
【发布时间】：2015-03-23 01:22:58
【问题描述】：

请在http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview 上查看我的 plunkr 代码示例

我有 4 个按钮，其中两个按钮因某种情况而被禁用。

我希望能够在两个被禁用的按钮上显示一个工具提示，对于第一个禁用的按钮会显示“Test itemName2 is not available”，对于第二个禁用的按钮会显示“Test itemName4 is not available”，并且没有工具提示在启用的其他两个之上。

这可能吗？如示例中所示，我一直在玩弄 ng-attr-title，但一直在寻找我想要的解决方案。

任何帮助将不胜感激..

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

    }



}]);

【问题讨论】：

标签： angularjs

【解决方案1】：

你可以使用：

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

链接演示：http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

【讨论】：

抱歉，问题是能够在两个被禁用的按钮上显示一个工具提示，对于第一个禁用的按钮会显示“测试 itemName2 不可用”，而对于第一个禁用按钮会显示“测试 itemName4 不可用”第二个禁用的按钮，并且在其他两个启用的按钮上没有工具提示。
基本上我想要禁用和启用按钮的不同工具提示
谢谢，太好了。 :)
这并不能完全达到您的要求。启用的按钮将具有item.name 的工具提示（例如“Test itemName1”）。您没有要求任何工具提示。
是的，这并不完全正确。我只是向他展示了为禁用和启用按钮实现不同工具提示的解决方案。

【解决方案2】：

<button ng-disabled="isDisabled(item.name)" 
        ng-attr-title="{{ tooltipText(item) }}" 
        ng-repeat="item in itemDetails">{{item.name}}</button>

然后在你的控制器中

$scope.tooltipText = function(item) {
  return $scope.isDisabled(item.name) ? item.name + ' is not available' : '';
};

【讨论】：

看起来至少 Chrome 现在正在为禁用的按钮触发鼠标事件，因此在启用或禁用按钮时可以使用。在最近的某个时候，这不起作用。
这对我有用，因为我基于一个单独的变量禁用了一个字段。自从@ammills01 提到的 chrome 触发鼠标事件以来的简单解决方案..
如果我只是在按钮内添加 ng-attr-title。它不显示任何工具提示。有什么需要修改的吗？