Delete Method Does Not Work

Question

Delete Method Does Not Work

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good Morning

I'm learning Angular JS and I'm having trouble making my delete method work. Does anyone know where the error is?

JS Code

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;
        })
    }
});

HTML code

<!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>

html angularjs

asked by anonymous 20.07.2017 / 14:45

2 answers

Take action by clicking a button on another tab Add elements in Associative Array - PHP

score 0 · Answer 1

Do you want to delete all contacts or just one? I believe only one. So in case you have to pass the contact object instead of the contacts on the button click. And in the method, you get only one contact, not the whole list. I think your filter will work with these changes.

score 0 · Answer 2

Next you have to reframe the entire object in ng-repeat, not the created instances

For usability issues it is always good to hide the button while no contact is selected, as it does not make sense to be there.

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><divclass="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>