You need to add a new name to the drop-down list (using the ui-grid ). It is necessary that when you click on the addNewPerson button, the value by id is taken from the input field and “pushed” to the drop-down list if such a name does not already exist. If there is such a name, alert should be called.

Here is a piece of code responsible for creating a drop-down list in html :

 <ui-select ng-model="person.selected" theme="select2" style="min-width:300px;"> <ui-select-match placeholder="Select a person in the list or search by name">{{$select.selected.name}} </ui-select-match> <ui-select-choices repeat="person in contacts | filter: {name: $select.search} track by $index"> <div ng-bind-html="person.name | highlight: $select.search"></div> </ui-select-choices> </ui-select>

Button and input field:

 <button type="button" id="addPerson" class="button" ng- click="addNewPerson()">Add New Person</button> <input id="name" class="form-control" placeholder="Enter your Name">

An array of contacts objects with a name field that is passed to the drop-down list:

  $scope.contacts = [ {name: "Han Solo"}, {name: "ThetaSigma"}, {name: "Ollie Reeder"}, {name: "Amy McDonald"}, {name: "PJ Harvey"}, {name: "Sofie Marceau"}, {name: "Arthur Zimmermann"}, {name: "Michelle Dockery"}, {name: "Xavier Dolan"} ];

And finally, the function responsible for adding:

 $scope.person = {}; $scope.addNewPerson = function () { var nameInput = document.getElementById("name"); for (var i=0; i <= $scope.contacts.length; i++) { if ($scope.contacts[i].name == nameInput.value.toLowerCase()) { alert("Error, the name entered already exists"); }else{ var obj1 = {name: nameInput.value}; $scope.contacts.push(obj1); } } };

While this function does not add anything and issues an alert 10 times, I do not understand why.

  • You better make an alert of compared values. - Visman 5:17 pm

1 answer 1

In Angular, always use two-way binding instead of direct access to the element. Those. here you need to change this: var nameInput = document.getElementById("name") and nameInput.value.toLowerCase() to $scope.userName and <input ng-model="userName"> , making the appropriate changes to the template and everywhere, where now done in a similar way.

  • I'll try to do so, thanks. Unsubscribe about the results. - TheDoctor
  • Tried the following: to push into place var nameInput = document.getElementById ("name"); $ scope.userName = ""; and also just $ scope.userName. The same tried to make a fuke as a glob. variable. In any case, it produces: ReferenceError: userName is not defined - TheDoctor
  • I did this: $scope.userName = ""; $scope.addNewPerson = function () { var name =$scope.userName; var match_found = false; for (var i=0; i <= $scope.contacts.length; i++) { if ($scope.contacts[i].name == name.toLowerCase()) { alert("Error, the name entered already exists"); match_found = true; break; } } if (!match_found) { var obj1 = {name:$scope.name}; $scope.contacts.push(obj1); } }; $scope.userName = ""; $scope.addNewPerson = function () { var name =$scope.userName; var match_found = false; for (var i=0; i <= $scope.contacts.length; i++) { if ($scope.contacts[i].name == name.toLowerCase()) { alert("Error, the name entered already exists"); match_found = true; break; } } if (!match_found) { var obj1 = {name:$scope.name}; $scope.contacts.push(obj1); } }; - TheDoctor
  • PS: I apologize for the indigestible code in the top comments. I persistently get the error Cannot read property 'name' of undefined, despite <input ng-model="userName" id="name1" class="form-control" placeholder="Enter your Name"> I went to the forums, Google, but I still do not understand why an error may occur. - TheDoctor