javascript - 将用户添加到下拉列表不起作用

Question

晚上好! 将用户添加到下拉列表时出现问题(使用 ui-grid)。 如果列表中没有这样的名称，我需要在单击“addNewPerson”按钮后将输入名称按 id 插入 dd 列表，或者调用“alert”(如果有)。

这是一段代码，负责在html中创建dd列表:

<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 type="button" id="addPerson" class="button" ng-  click="addNewPerson()">Add New Person</button>

<input id="name" class="form-control" placeholder="Enter your Name">

带有“name”字段的对象数组，需要传入dd列表:

    $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"}
];

最后，臭名昭著的功能:

$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);
        }
    }

};

我尝试过该函数的各种形式，它要么不推送任何内容并提醒 10 次，要么正确推送名称，但即使是已经存在的名称，或者在单次添加后推送 10 次并提醒 10 次。

我是残疾人。试图在这里找到类似的问答，但无济于事。 抱歉我的英语，这不是我的母语。

Answer 1

正在工作 codepen示例。

首先更改输入的 html 以使用范围变量:

<input ng-model="name" class="form-control" placeholder="Enter your Name">

在 Controller 中:

$scope.name = "";
$scope.addNewPerson = function () {
  for (var i=0; i < $scope.contacts.length; i++) {

    if ($scope.contacts[i].name.toLowerCase() === $scope.name.toLowerCase()) {
        alert("Error, the name entered already exists");
        return;
    }
  }
  $scope.contacts.push({name: $scope.name});
};