设置禁用按钮的工具提示

一尘不染

设置禁用按钮的工具提示

angularjs

请在 http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview上的
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>

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

    }



}]);

阅读 273

2020-07-04

共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

2020-07-04