Menu
Please view my example in plunkr code on http://plnkr.co/edit/9dyBVZh67sxmIqUQB50S?p=preview
I have 4 buttons in which two buttons are disabled due to a condition.
I want to be able to display a tooltip over the two buttons that are disabled that would say "Test itemName2 is not available" for the first disabled button and "Test itemName4 is not available" for the second disabled button and no tooltip over the other two that are enabled.
Would this be possible? I have been toying around with ng-attr-title as seen in the example but is stuck on finding the solution to what I want.
Any help would be greatly appreciated..
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;
}
}
}]);
889
You can use:
<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
153
<button ng-disabled="isDisabled(item.name)"
ng-attr-title="{{ tooltipText(item) }}"
ng-repeat="item in itemDetails">{{item.name}}</button>
And then in your controller
$scope.tooltipText = function(item) {
return $scope.isDisabled(item.name) ? item.name + ' is not available' : '';
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
