Delete Method Does Not Work

Asked

Viewed 44 times

0

Good Morning

I am learning Angular JS and am having a hard time getting my delete method to work. Does anyone know where the bug 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

2 answers

0

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

  • The user who asked the question made the code available so that we can analyze it and be able to answer. It would be interesting if you showed through the code a satisfactory answer. Just saying what you think is not a clear answer for anyone.

0

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

for usability issues it is always good to hide the button while no contact is selected, because it makes no 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>
<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>

Browser other questions tagged html angularjs

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