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 duplicate entries from the list.
I tried to use indexoff
and foreach
to no avail.