In this example we have a button for add items when you click on the Add items button it will add item with some default name. You can edit the entered item by double click on the item and you can make list of your own choice.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-app="clickExample">
<div ng-controller="ExampleController" ng-init="hideOnBlur=true">
Double-click on the below items to edit <button ng-click="addRecords()">Add Items</button>
<div ng-repeat="record in records">
<b ng-hide="inputShow && index==$index && hideOnBlur" ng-dblclick="editRecord(record.name,$index);hideOnBlur = true">{{record.name}}</b>
<input ng-show="inputShow && index==$index && hideOnBlur" ng-blur="hideOnBlur=false" ng-model="record.name">
</div>
</div>
<script>
var app = angular.module("clickExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.records = [{ name: 'LearnIt' }];
$scope.addRecords = function () {
var count = $scope.records.length + 1;
$scope.records.push({ name: 'Double Click On me' + count });
};
$scope.editRecord = function (item, indx) {
$scope.hideOnBlur = true;
$scope.inputShow = true;
$scope.item = item;
$scope.index = indx;
};
}]);
</script>
</body>
</html>
