0

Bom Dia

Estou aprendendo Angular JS e estou com dificuldades em fazer meu método de deletar funcionar. Alguém sabe onde está o erro ?

Código do JS

angular.module("listaTelefonica", []);
angular.module("listaTelefonica").controller("listaTelefonicaCtrl", function ($scope) {
    $scope.app = "Lista Telefonica";

    $scope.contatos = [
        {nome: "Bernardo", telefone:"12345678"},
        {nome: "Rodrigo", telefone:"55555555"},
        {nome: "Fernanda", telefone:"99998888"},
        {nome: "Júlia", telefone:"70705000"}
    ];$scope.operadoras = [
        {nome: "Oi", codigo: 14, categoria:"Celular"},
        {nome: "Vivo", codigo: 15, categoria:"Celular"},
        {nome: "Claro", codigo: 60, categoria:"Celular"},
        {nome: "TIM", codigo: 41, categoria:"Celular"},
        {nome: "Embratel", codigo: 21, categoria: "Fixo"},
        {nome: "GVT", codigo: 99, categoria:"Fixo"}
    ];$scope.adicionarContato = function(contato) {
        $scope.contatos.push(angular.copy(contato));
        delete $scope.contato;
    }
    $scope.classe1 = "selecionado";
    $scope.classe2 = "negrito";
    $scope.apagarContato = function (contatos) {
        $scope.contatos = contatos.filter(function (contato) {
            if(!contato.selecionado) return contato;
        })
    }
});

Código HTML

<!DOCTYPE html>
<head>
   <meta charset="UTF-8">
   <title>Lista Telefônica</title>
   <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
   <script src="js/angular.min.js"></script>
   <script type="text/javascript" src="js/aula1.js"></script>
</head>
<body ng-controller="listaTelefonicaCtrl">
   <div class="jumbotron">
      <h3>{{app}}</h3>
      <table class="table table-striped">
         <tr>
            <th></th>
            <th>Nome</th>
            <th>Telefone</th>
            <th>Operadora</th>
         </tr>
         <tr ng-class="{selecionado: contato.selecionado, negrito: contato.selecionado}" ng-repeat="contato in contatos">
            <!--Itera sobre os itens de uma coleção ou objeto-->
            <td><input type="checkbox" ng-model="contato.selecionado"/></td>
            <td>{{contato.nome}}</td>
            <td>{{contato.telefone}}</td>
            <td>{{contato.operadoras.nome}}</td>
         </tr>
      </table>
      <hr/>
      <input class="form-control" type="text" ng-model="contato.nome" placeholder="Nome"><br>
      <input class="form-control" type="text" ng-model="contato.telefone" placeholder="Telefone">
      <select class="form-control" ng-model="contato.operadoras" ng-options="operadora.nome group by operadora.categoria for operadora in operadoras">
         <option value="">Selecione uma operadora</option>
      </select>
      <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="!contato.nome || !contato.telefone">Adicionar Contato </button>
      <button class="btn btn-danger btn-block" ng-click="apagarContatos(contatos)">Apagar Contato </button>
   </div>
</body>
</html>

2 Respostas 2

0

Você quer apagar todos os contatos ou apenas um? acredito que apenas um. Então, no caso você tem que passar o objeto contato ao invés de contatos no click do botão. E no método, você recebe apenas um contato e não a lista toda. Acho que o seu filter vai funcionar com estas alterações.

1
  • O usuário que fez a pergunta disponibilizou o código para que nós possamos analisa-lo e conseguir responder. Seria interessante que você mostrasse através do código uma resposta satisfatória. Apenas dizer o que você pensa não é uma resposta clara pra ninguém.
    – Bsalvo
    20/07/2017 às 13:18
0

Seguinte você tem de refenciar o objeto inteiro no ng-repeat, não as instâncias criadas

para questões de usabilidade é sempre bom ocultar o botão enquanto nenhum contato é selecionado, pois não faz sentido o mesmo estar ali.

angular.module("listaTelefonica", []);
angular.module("listaTelefonica").controller("listaTelefonicaCtrl", function ($scope) {
$scope.app = "Lista Telefonica";
  
  $scope.isRestSelecionado = function(contato) {

		return contato.some(function (rest) {
			return rest.selecionado;
		})

	}
  
  

$scope.contatos = [
    {nome: "Bernardo", telefone:"12345678"},
    {nome: "Rodrigo", telefone:"55555555"},
    {nome: "Fernanda", telefone:"99998888"},
    {nome: "Júlia", telefone:"70705000"}
];$scope.operadoras = [
    {nome: "Oi", codigo: 14, categoria:"Celular"},
    {nome: "Vivo", codigo: 15, categoria:"Celular"},
    {nome: "Claro", codigo: 60, categoria:"Celular"},
    {nome: "TIM", codigo: 41, categoria:"Celular"},
    {nome: "Embratel", codigo: 21, categoria: "Fixo"},
    {nome: "GVT", codigo: 99, categoria:"Fixo"}
];$scope.adicionarContato = function(contato) {
    $scope.contatos.push(angular.copy(contato));
    delete $scope.contato;
}
$scope.classe1 = "selecionado";
$scope.classe2 = "negrito";
 $scope.apagarContato = function (contatos) {
  $scope.contatos = contatos.filter(function (contato) {
      if(!contato.selecionado) return contato;
  })

}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="jumbotron" ng-app="listaTelefonica" ng-controller="listaTelefonicaCtrl">
<h3>{{app}}</h3>
<table class="table table-striped">
        <tr>
            <th></th>
            <th>Nome</th>
            <th>Telefone</th>
            <th>Operadora</th>
        </tr>
  <tr ng-class="{selecionado: contato.selecionado, negrito: contato.selecionado}" ng-repeat="contato in contatos"> <!--Itera sobre os itens de uma coleção ou objeto-->
            <td><input type="checkbox" ng-model="contato.selecionado"/></td>
            <td>{{contato.nome}}</td>
            <td>{{contato.telefone}}</td>
            <td>{{contato.operadoras.nome}}</td>
        </tr>
    </table>
 <hr/>
    <input class="form-control" type="text" ng-model="contato.nome" placeholder="Nome"><br>
 <input class="form-control" type="text" ng-model="contato.telefone" placeholder="Telefone">
<select class="form-control" ng-model="contato.operadoras" ng-options="operadora.nome group by operadora.categoria for operadora in operadoras">
        <option value="">Selecione uma operadora</option>
    </select>
 <button class="btn btn-primary btn-block" ng-click="adicionarContato(contato)" ng-disabled="!contato.nome || !contato.telefone">Adicionar Contato </button>
    <button class="btn btn-danger btn-block" ng-click="apagarContato(contatos)" ng-if="isRestSelecionado(contatos)">Apagar Contato </button>
    
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .