web-dev-qa-db-fra.com

Angularjs vérifie si la valeur transmise existe dans un tableau

J'essaie de transmettre deux valeurs de champ de texte dans un tableau à l'aide de AngularJS, mais je souhaite également vérifier si la première valeur transmise existe déjà dans le tableau. Si c'est le cas, je ne veux pas qu'il soit ajouté à nouveau. S'il n'existe pas, ajoutez les valeurs. Je peux le faire pour ajouter les valeurs, mais je suis coincé en essayant de vérifier si la valeur du nom de famille existe déjà dans le tableau. J'avais trouvé des exemples que j'avais essayé de suivre mais je n'arrivais pas à les faire fonctionner. Merci pour toute aide!

<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 = ' ';
        }
    }
}
javascriptangularjsangularjs-ng-repeat
6
Trevor

Comme Craig l'a dit, vous devez parcourir le tableau en tant que tel

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 = ' ';
15
NicolasMoise

On dirait qu'il y a une erreur de syntaxe dans votre extrait. Si vous préférez une version à une ligne dans l'instruction if, Changez votre condition if en:

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 renvoie vrai si l'un des éléments répond à l'exigence

some () exécute la fonction de rappel une fois pour chaque élément présent dans le tableau jusqu'à ce qu'il en trouve un où le rappel renvoie une valeur vraie. Si un tel élément est trouvé, some () retourne immédiatement true . https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some

9
ssnau

Ce "$ scope.todos.indexOf (text: $ scope.formTodoLast)" ne fonctionnera pas. Vous devez parcourir le tableau et vérifier la propriété formTodoLast de chaque objet. Ou, si vous utilisez jQuery complet, vous pouvez utiliser grep ().

Voici un exemple, notez que la comparaison est sensible à la casse pour le moment. Si la liste est longue, envisagez d'utiliser une boucle Javascript for au lieu de forEach d'Angular. Vous pouvez sortir de la boucle for et elle est probablement plus rapide.

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 = ' ';
        }
    }
}
2
Craig Squire