zestaw podpowiedzi dla niepełnosprawnego przycisku

Proszę zobaczyć mój przykład w kodzie plunkr na http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview zestaw podpowiedzi dla niepełnosprawnego przycisku

mam 4 przyciski, w którym dwa przyciski są wyłączone ze względu na stan.

Chcę móc wyświetlać etykietkę narzędziową na dwóch wyłączonych przyciskach, które mówią: "Pozycja testowaNazwa2 jest niedostępna" dla pierwszego wyłączonego przycisku i "Pozycja testowaNazwa4 jest niedostępna" dla drugiego wyłączonego przycisku i nie podpowiedź nad pozostałymi dwoma, które są włączone.

Czy byłoby to możliwe? Bawiłem się z ng-attr-title, jak widać w przykładzie, ale utknąłem na poszukiwaniu rozwiązania tego, czego chcę.

Każda pomoc będzie bardzo mile widziane ..

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

    } 



}]);

Źródło

2015-03-23 aliaz

Można użyć:

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

demo Link: http://plnkr.co/edit/Hh1kH7HLatrQj76gFQ2E?p=preview

Źródło

2015-03-23 01:52:02

Niestety pytanie było, aby móc wyświetlić podpowiedź nad dwoma przyciskami, które są wyłączone, że powie „Test itemName2 nie jest dostępny” dla pierwszego niepełnosprawnych i przycisk "Test itemName4 nie jest dostępny" dla drugiego wyłączonego przycisku i brak podpowiedzi dla pozostałych dwóch, które są włączone. – aliaz

przede wszystkim Chcę różne podpowiedzi dla niepełnosprawnych i włączone przyciski – aliaz

Dzięki, że jest świetnie. :) – aliaz

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

A następnie w kontrolerze

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

Źródło

2015-03-23 02:52:19 ken4z

Wygląda na to, że Chrome uruchamia teraz zdarzenia myszy dla wyłączonych przycisków, więc to działa, gdy przycisk jest włączony lub wyłączony. W pewnym momencie w niedawnej przeszłości to nie zadziałało. – ammills01

To działało dla mnie, odkąd wyłączam pole na podstawie oddzielnej zmiennej. Proste rozwiązanie, ponieważ zdarzenie z myszką z ognistym chromem wspomina @ ammills01 .. –

Jeśli dodam tylko przycisk ng-attr wewnątrz przycisku. Nie pokazuje żadnej etykiety narzędzi. Coś, co muszę zmodyfikować? –

zestaw podpowiedzi dla niepełnosprawnego przycisku

Odpowiedz

Powiązane problemy