Question

请在http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview

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

我有4个按钮，其中两个按钮因条件而被禁用。

我希望能够在禁用的两个按钮上显示工具提示，第二个禁用按钮的“测试项目名称2不可用”，第二个禁用按钮的“测试项目名称4不可用”，并且没有工具提示在其他两个已启用。

这可能吗？我一直在玩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;
      }

    }



}]);

Answer 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

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

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

2 个答案: