Set suggerimento per un pulsante disattivato

prego il mio esempio nel codice plunkr su http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview Set suggerimento per un pulsante disattivato

Ho 4 pulsanti in cui due pulsanti sono disabili a causa di una condizione.

Voglio essere in grado di visualizzare un suggerimento sui due pulsanti disabilitati che dire "Test itemName2 non è disponibile" per il primo pulsante disabilitato e "Test itemName4 non è disponibile" per il secondo pulsante disabilitato e no tooltip sugli altri due che sono abilitati.

Questo sarebbe possibile? Ho gironzolato con ng-attr-title come visto nell'esempio, ma sono bloccato nel trovare la soluzione per quello che voglio.

Qualsiasi aiuto sarebbe molto apprezzato ..

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

    } 



}]);

fonte

2015-03-23 aliaz

È possibile utilizzare:

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

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

fonte

2015-03-23 01:52:02

Spiacente la domanda era di essere in grado di visualizzare la descrizione sopra i due pulsanti che sono disabili che avrebbe detto "Test itemName2 non è disponibile" per la prima disabile pulsante e "Test itemName4 non è disponibile" per il secondo pulsante disabilitato e nessun suggerimento sugli altri due che sono abilitati. – aliaz

basicly voglio diversi tooltip per i pulsanti disabilitati e abilitati – aliaz

Grazie, è grandioso. :) – aliaz

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

E poi nel controller

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

fonte

2015-03-23 02:52:19 ken4z

Sembra che almeno Chrome stia ora facendo scattare gli eventi del mouse per i pulsanti disabilitati in modo che funzioni quando il pulsante è abilitato o disabilitato. Ad un certo punto nel passato recente questo non ha funzionato. – ammills01

Questo ha funzionato per me dal momento che sto disabilitando un campo sulla base di una variabile separata. Soluzione semplice dal momento che l'evento mouse fire cromato come @ ammills01 menzionato .. –

Se ho appena aggiunto ng-attr-title all'interno del pulsante. Non mostra alcun suggerimento. Qualcosa che devo modificare? –

Set suggerimento per un pulsante disattivato

risposta

Problemi correlati