Make list item's disabled


#1

Is there an easy way to disable list items on the fly?

When I have no internet connection available (when $scope.hasConnection === false), I want certain list items not to be clickable and preferably have a disabled state.


#2

You should be able to have a callback when you check for internet connection and either set each list items href to nothing.

var linkHolder = document.getElementsByClassName("ClassYourselfFool");
 var theLink = linkHolder.getAttribute("href");

if ($scope.hasConnection === false){
   $scope.theLink = "#"
}

Something like that I believe could work. You could also mess around with adding an removing class to make them stand out as not being links


#3

Thanks Mike. I’ll double check that one. I’d prefer to do more with ngClick and ngClass. I’ll post some code here once I’ve got it working.


#4

Obviously those would be better but that should help some what. If you want to use ngClick you could always wrap the code above in a function then use ng-click to call the function every time you click a link.

Not too sure how performant that would be as you would have to run the function every time, but let me know how it works out!


#5

For now, I fixed things like this:

<a ng-if="hasConnection"
	class="item"
	ng-repeat='onlineItem in onlineItems'
	ng-click='go(onlineItem.target)'>
	{{ onlineItem.label | translate }}
</a>

<a ng-if="!hasConnection" 
	ng-repeat='offlineItem in offlineItems'
	ng-click='noConnectionMessage()'
	class="item disabled">
	{{ offlineItem.label | translate }}
</a>

This works for me :smile:
It’s a bit ugly though since onlineItems and offlineItems are identical. I’ll refactor this in a bit.

And of course I’ve added this network checking logic to my Controller, using my CordovaNetwork service.

//*** Keep an eye on the connection status
$scope.hasConnection = CordovaNetwork.isOnline(); // Initial state
$scope.$on('Cordova.NetworkStatus.Offline', function () {
	$scope.hasConnection = false;
});
$scope.$on('Cordova.NetworkStatus.Online', function () {
	$scope.hasConnection = true;
});

#6

Nice start, looks good. Would you mind posting what you get once refactored? Seems like something that others could want for certain use cases


#7

Actually, I’m still using the example above with one minor change; I use 1 collection in both cases. But then I’m offline, I just don’t parse the href which cause the items to be unclickable.

The collection on my $scope looks like this now:

$scope.networkItems = [
	{
		label: 'MENU.PROFILE',
		target: '#/profile'
	},
	{
		label: 'MENU.CHANGE_PIN',
		target: '#/change-pin'
	},
	{
		label: 'MENU.LOST_CARD',
		target: '#/lost-card'
	}
];

The “big change” here: onlineItems and offlineItems (which were two exact collections) became networkItems

As you might have noticed, I’m using Angular Translate for all my strings. Even though my app just uses one language (English, for now) it feels like ‘best practice’ to keep all my strings contained in one file instead of hard coded all over the place.


#8

I’m new to AngularJS, but how about this idea:

ng-click="gotoItem(item.id)"

$scope.gotoItem = function(itemId) {
            //check if disabled
            $location.path("/tab/item/"+itemId);
};