Prevent duplicate entry into a list using Angularjs

Question

Prevent duplicate entry into a list using Angularjs

Asked 9 years, 1 month ago

Viewed 730 times

1

HTML:

<div class="container" ng-controller="ListaComprasController">
            <div class="row">
                <div class="page-header">
                    <h1>Lista de compras</h1>
                </div>
            </div>
            <div class="row">
                <table id="lista-compras" class="table table-striped">
                    <thead>
                        <tr>
                          <th>Comprado?</th>
                          <th>Produto</th>
                          <th>Quantidade</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in itens" class="comprado-{{ item.comprado }}">
                          <td><input type="checkbox" ng-model="item.comprado"></td>
                          <td><strong>{{ item.produto }}</strong></td>
                          <td>{{ item.quantidade }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="row">
                <form class="form-inline" name="formItem">
                  <input type="text" ng-model="item.produto" placeholder="Produto">
                  <input type="number" ng-model="item.quantidade" placeholder="Quantidade" class="input-small">
                  <button class="btn btn-primary" ng-click="adicionaItem()">adicionar ítem</button>
                </form>
             </div>
        </div>

Controller:

function ListaComprasController($scope) {
    $scope.itens = [
        {produto: 'Leite', quantidade: 2, comprado: false},
        {produto: 'Cerveja', quantidade: 12, comprado: false}
    ];

    $scope.adicionaItem = function () {
        $scope.itens.push({produto: $scope.item.produto,
                           quantidade: $scope.item.quantidade,
                           comprado: false});
        $scope.item.produto = $scope.item.quantidade = '';

    };
}

I would like to avoid entering duplicate items on the list.

I tried to use indexoff and foreach unsuccessful.

1 answer

Browser other questions tagged angularjs angularjs-scope

You are not signed in. Login or sign up in order to post.

by David Schrammel • **2,310** points · Answer 1 · 2015-11-05T16:08:26+00:00

Hello, follow your code adapted!

see the method

$scope.verificaProdutoExistente = function(value) {
    for(var i = 0; i < $scope.itens.length; i++) {
        if($scope.itens[i].hasOwnProperty("produto") && $scope.itens[i]["produto"] === value) {
            return i;
        }
    }
    return -1;
}

and its use just below, OBS in Stackoverflow Alert will not work.

angular.module('app',[]).controller('ListaComprasController', function($scope) {

    $scope.itens = [
         {produto: 'Leite', quantidade: 2, comprado: false},
         {produto: 'Cerveja', quantidade: 12, comprado: false}
        ];

    $scope.adicionaItem = function () {
        //Verifica se o produto ja existe
        if ( $scope.verificaProdutoExistente($scope.item.produto) === -1 ){

            $scope.itens.push({produto: $scope.item.produto,
                            quantidade: $scope.item.quantidade,
                            comprado: false});
            $scope.item.produto = $scope.item.quantidade = '';
        
        } else {
            //Logica caso o produdo ja exista na lista
            alert("Produto ja existe.")
        }
    };

    $scope.verificaProdutoExistente = function(value) {
        for(var i = 0; i < $scope.itens.length; i++) {
            if($scope.itens[i].hasOwnProperty("produto") && $scope.itens[i]["produto"] === value) {
                return i;
            }
        }
        return -1;
    }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" style="background-color">


<div class="container" ng-controller="ListaComprasController">
    <div class="row">
        <div class="page-header">
            <h1>Lista de compras</h1>
        </div>
    </div>
    <div class="row">
        <table id="lista-compras" class="table table-striped">
            <thead>
                <tr>
                  <th>Comprado?</th>
                  <th>Produto</th>
                  <th>Quantidade</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in itens" class="comprado-{{ item.comprado }}">
                  <td><input type="checkbox" ng-model="item.comprado"></td>
                  <td><strong>{{ item.produto }}</strong></td>
                  <td>{{ item.quantidade }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="row">
        <form class="form-inline" name="formItem">
          <input type="text" ng-model="item.produto" placeholder="Produto">
          <input type="number" ng-model="item.quantidade" placeholder="Quantidade" class="input-small">
          <button class="btn btn-primary" ng-click="adicionaItem()">adicionar ítem</button>
        </form>
     </div>
</div>



</body>