AngularJS检查传递的值是否存在于数组中

Question

我正在尝试使用AngularJS将两个文本字段的值传递到数组中，但我还想检查传递的第一个值是否已经存在于该数组中。如果它已经存在于数组中，我不想再添加它，如果不存在，则添加这些值。我可以将这些值添加进去，但是在尝试检查姓氏值是否已经存在于该数组中时出现了困难。我找到了一些示例，尝试按照它们进行操作，但似乎无法使其正常工作。感谢您的帮助！

<div class="panel-body">
    <div ng-controller="TodoCtrl">
        <ul>
            <li li ng-repeat="todo in todos">
            {{todo.text}}, {{todo.name}}
            </li>
        </ul>
        <form class="form-horizontal">
        <input type="text" ng-model="formTodoLast" ng-model-instant>
        <input type="text" ng-model="formTodoFirst" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </div>
</div>

todo.js

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

    if($scope.todos.indexOf(text:$scope.formTodoLast) == -1) {
        $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
        $scope.formTodoText = ' ';
        $scope.formTodoName = ' ';
        }
    }
}

- Trevor

---

这个"$scope.todos.indexOf(text:$scope.formTodoLast)"是行不通的。你必须循环遍历数组并检查每个对象的formTodoLast属性。或者，如果使用完整的jQuery，可以使用grep()函数。 - Craig Squire

Answer 1

就像 Craig 所说的那样，你需要遍历数组：

var addToArray=true;
for(var i=0;i<$scope.todos.length;i++){
    if($scope.todos[i].text===$scope.formTodoLast){
        addToArray=false;
    }
}
if(addToArray){
    $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
}
$scope.formTodoText = ' ';
$scope.formTodoName = ' ';

- NicolasMoise

Answer 2

似乎您的代码片段中存在语法错误。如果您愿意将if语句转换为单行版本，请将您的if条件更改为：

看起来你的片段里有语法错误。 如果你喜欢 if 语句的单行版本，把你的 if 条件改成：

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

    if(!$scope.todos.some(function(td){return td.text===$scope.formTodoLast})) {
        $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
        $scope.formTodoText = ' ';
        $scope.formTodoName = ' ';
        }
    };
}

Array.prototype.some 方法会检查数组中是否有任意一个元素符合要求，如果有则返回 true。

some() 方法会对数组中的每个元素执行一次回调函数，直到找到一个使得回调函数返回 true 的元素。如果找到这样一个元素，some() 方法会立即返回 true。 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some

- ssnau

Answer 3

这个"$scope.todos.indexOf(text:$scope.formTodoLast)"不会起作用。你需要循环遍历数组并检查每个对象的formTodoLast属性。或者，如果使用完整的jQuery，可以使用grep()。

这是一个例子，请注意比较目前是区分大小写的。如果列表很长，请考虑使用Javascript的for循环而不是Angular的forEach，你可以跳出for循环，速度可能更快。

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

        var missingName = true;
        angular.forEach($scope.todos, function(value, key){
           if(value.formTodoLast == $scope.formTodoLast)
           {
               missingName = false;
           }
         });

        if(missingName) {
            $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
            $scope.formTodoText = ' ';
            $scope.formTodoName = ' ';
        }
    }
}

- Craig Squire