Angularjs 设置禁用按钮的工具提示_Angularjs

Angularjs 设置禁用按钮的工具提示

angularjs

Angularjs 设置禁用按钮的工具提示,angularjs,Angularjs,请查看我在上的plunkr代码中的示例我有4个按钮，其中两个按钮由于某种情况而被禁用我希望能够在禁用的两个按钮上显示工具提示，第一个禁用的按钮上显示“Test itemName2不可用”，第二个禁用的按钮上显示“Test itemName4不可用”，另外两个启用的按钮上没有工具提示这可能吗？我一直在玩弄示例中看到的ng attr title，但一直在寻找我想要的解决方案任何帮助都将不胜感激 html: <body> <div ng-controller=ItemsC

请查看我在上的plunkr代码中的示例

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

我希望能够在禁用的两个按钮上显示工具提示，第一个禁用的按钮上显示“Test itemName2不可用”，第二个禁用的按钮上显示“Test itemName4不可用”，另外两个启用的按钮上没有工具提示

这可能吗？我一直在玩弄示例中看到的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>

您可以使用：

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


{{item.name}

链接演示：

很抱歉，问题是，在两个被禁用的按钮上显示工具提示，第一个被禁用的按钮将显示“Test itemName2不可用”和“Test itemName4不可用”对于第二个禁用的按钮，在其他两个启用的按钮上没有工具提示。基本上，我希望禁用和启用的按钮有不同的工具提示。谢谢。）这并没有达到你的要求。启用的按钮将有一个工具提示

item.name

（例如“testitemname1”）。你没有要求工具提示。是的，它不完全正确。我只是向他展示了为禁用和禁用按钮实现不同工具提示的解决方案。看起来至少Chrome现在正在为禁用的按钮触发鼠标事件，所以当按钮被启用或禁用时，这种方法就起作用了。在最近的某个时候，这不起作用。这对我来说是有效的，因为我正在基于一个单独的变量禁用一个字段。自从@ammills01提到的chrome fire鼠标事件以来，简单的解决方案。如果我只是在按钮内添加ng attr标题。它不显示任何工具提示。有什么需要修改的吗？

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

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