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;
});
1 Like
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);
};
1 Like