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

Adding of users to dropdown list doesn't work

本文关键字：下拉列表 不起作用 添加 用户      更新时间：2023-09-26

晚上好!将用户添加到下拉列表有一个问题(使用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次警报。

我残疾。试图在这里找到类似的q/a，但无济于事。对不起，我的英语不是我的母语。

这是一个相互依赖的例子。

首先将输入的html改为使用范围变量:

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

，在控制器中:

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

你的模型绑定新的用户名:

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

然后在js中，你必须跳出forloop:

$scope.person = {};
    $scope.addNewPerson = function () {
    var name = $scope.new_user_name || "";
    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: name};
            $scope.contacts.push(obj1);
    }
};

以上答案都很好，我只是想添加使用函数式编程风格的选项，因为我喜欢这样做，对我来说它看起来更干净。

<<h3>视图/h3>
<input ng-model="name" class="form-control" placeholder="Enter your Name">
控制器

$scope.name = "";
$scope.addNewPerson = function () {
    var contactIndex = $scope.contacts.map(function (contact) {
        return contact.name.toLowerCase();
    }).indexOf($scope.name.toLowerCase());
    if (contactIndex === -1)
        $scope.contacts.push({name: $scope.name});
    else
        console.log("Error, the name entered already exists");
}

注意事项:

  • 当使用angular时，永远不要访问视图控制器中的DOM，使用指令代替
  • 函数式编程风格将节省你大量的输入
  • 使用console.log代替警报可以提高你的工作效率。9000%
相关文章：