2

Требуется добавить новое имя в выпадающий список (используется ui-grid). Нужно, чтобы при нажатии на кнопку addNewPerson бралось значение по id из поля ввода и «пушилось» в выпадающий список, если такого имени ещё нет. Если же такое имя имеется, то должен вызываться alert.

Вот кусок кода, отвечающий за создание выпадающего списка в 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 type="button" id="addPerson" class="button" ng-  click="addNewPerson()">Add New Person</button>

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

Массив объектов contacts с полем name, который передаётся в выпадающий список:

    $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 раз alert, не понимаю, почему.

1
  • Вы лучше алерт сравниваемых значений сделайте.
    – Visman
    Commented 23 сент. 2015 в 17:17

1 ответ 1

1

В Angular всегда используйте двустороннее связывание вместо прямого доступа к элементу. Т.е. тут надо поменять вот это: var nameInput = document.getElementById("name") и nameInput.value.toLowerCase() на $scope.userName и <input ng-model="userName"> , внеся соответствующие изменения в шаблон и всюду, где сейчас сделано подобным образом.

4
  • Попробую сделать так, спасибо. Отпишусь о результатах.
    – TheDoctor
    Commented 24 сент. 2015 в 16:35
  • Пробовал следующее: пихать на место var nameInput = document.getElementById("name"); $scope.userName =" "; и также просто $scope.userName. То же пытался вынести за фуекцию как глоб. переменную. В любом случае выдаёт: ReferenceError: userName is not defined
    – TheDoctor
    Commented 24 сент. 2015 в 17:05
  • Я сделал так: $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
    Commented 22 окт. 2015 в 17:14
  • PS: прошу прощения за неудобоваримый код в верхнем комментарии. Мне упорно выдаётся ошибка Cannot read property 'name' of undefined, несмотря на <input ng-model="userName" id="name1" class="form-control" placeholder="Enter your Name"> На форумы ходил, гуглил, но всё равно не понимаю, отчего может возникать ошибка.
    – TheDoctor
    Commented 22 окт. 2015 в 17:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.