clone object with unique name in Angular - html

Question

I'm new to Angular and looking for a way to make a clone button inside a list.
When I click this button, it will clone the object and add a number to the object name:
"new test" - will be changed to "new test (2)" and so on...
It requires to check the last 3 letters every time and check all the objects every time.
Is there any library doing this?

Answer 1

I think you don't need any lib for this. Basically, it you need one loop that looks for duplicates. See an example:
angular.module('myApp', [])
.controller('MyCtrl', function($scope){
$scope.items = ['Sample item'];
$scope.suggestedNewName = 'Sample item';
var isNameOccupied = function(name) {
return $scope.items.indexOf(name) >= 0;
};
$scope.addNewItem = function(){
var suggestedName = $scope.suggestedNewName;
var newName = suggestedName;
for (var i = 2; isNameOccupied(newName); i++) {
newName = suggestedName + " (" + i + ")";
}
$scope.items.push(newName);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<form ng-controller="MyCtrl" ng-submit="addNewItem()">
<ul>
<li ng-repeat="item in items">{{ item }}</li>
</ul>
<label>Suggested name for new item:</label>
<input type="text" ng-model="suggestedNewName">
<button type="submit">Add new item!</button>
</form>
</div>