I have a list and each item of the list is clickable.
I want that each item should be clickable only one time.
Once someone click on it, it will be disable or not clickable for second time.
My code is Like folowing:
<li data-ng-repeat="item in items">
<a id="{{item.id}}" data-ng-click="insertRecord(item.id)" data-ng-controller="addCtrl">
{{item.name}}
</a>
</li>
flim's answer almost works but since addCtrl creates isolate scope, you would need to define seenIds on the scope whose controller contains addCtrl. Here is a working solution:
The HTML:
<div ng-app ng-controller="MainCtrl">
<ul>
<li data-ng-repeat="item in items">
<a id="{{item.id}}" data-ng-controller="addCtrl"
data-ng-click="item.clicked || insertRecord(item.id); item.clicked = true">
{{item.name}}
</a>
</li>
</ul>
</div>
The JS:
function MainCtrl($scope) {
$scope.items = [
{id: 1, name: 'foo'},
{id: 2, name: 'bar'}
];
$scope.insertRecord = function(itemId) {
alert(itemId + ' clicked (inserting...)');
};
}
function addCtrl($scope) {
}
If you were to attach the click handler in jQuery, then you could use .one(), for example :
$("#whatever").one(insertRecord);//no need to pass a an id as it can be derived within the function
I'm not sure Angular allows you to do this.
Create a hash in the scope of addCtrl
$scope.seenIds = {}
Your insertRecord(item.id) will check first if the id has been seen. If it has, don't do anything.
$scope.insertRecord = function (id) {
if (typeof $scope.seenIds[id] === "undefined") {
$scope.seenIds[id] = 1;
// do your thing
}
}
They can click all they want, but nothing will happen except the first click.
