0

Estou com uma dúvida quanto ao disabled. Tenho um array de pessoas que quero incluir em um array de empresa. Utilizo o data-ng-repeat para exibir as pessoas em uma tabela, onde são adicionados botões a cada linha para que sejam adicionados no array empresa. Desabilitei a funcionalidade de adicionar uma pessoa à empresa através do disabled para que não haja um cadastro duplicado.

var a = angular.module("2",[]);
        a.controller("controller", function($scope){
            $scope.pessoas= [{nome:"Rodrigo", data:"18/01/1991", id:"1"},
                            {nome: "Ana", data:"12/04/1959", id:"2"},
                            {nome: "Teresa", data:"19/07/1984", id:"3"}];
            $scope.empresa=[];              
            $scope.adicionarContatos = function(pessoa){
                $scope.empresa.push(angular.copy(pessoa));

            };
            $scope.removerContato = function(z){
                $scope.empresa.pop(z);
            };          
        });
    <table>
        <tr>
            <th>Nome</th>
            <th>Data</th>
        </tr>
        <tr data-ng-repeat="z in pessoas">
            <td data-ng-bind="z.nome"></td>
            <td data-ng-bind="z.data"></td>
            <td> <button class="btn btn-sucess fa fa-shopping-cart" data-ng-click="adicionarContatos(z)" onclick="disabled=true"></button>
            </td>   
        </tr>   
    </table>

Porém, como consequência, não consigo mais reabilitar o botão mesmo deletando um objeto do array empresa, que também é exibido em uma outra tabela através do ng-repeat.

<table>
        <tr>
            <th>Nome</th>
            <th>Data</th>
        </tr>
        <tr data-ng-repeat="z in empresa">
            <td data-ng-bind="z.nome"></td>
            <td data-ng-bind="z.data"></td>
            <td> <button class="btn btn-sucess fa fa-shopping-cart" data-ng-click="removerContato(z)" </button>
            </td>
        </tr>
    </table>

O que eu preciso fazer para que, ao remover a pessoa de empresa, ele automaticamente habilite a pessoa em pessoas? Já tentei atribuir id a cada botão, mas somente o primeiro é setado e o document.getElementByID não funciona.

2
  • Você tem que criar no array de pessoas um item booleano para que possa trocar o usuário de habilitado para não habilitado e vice-versa! um idéia.
    – novic
    Commented 15/07/2018 às 13:21
  • Mas que função eu usaria com o valor do booleano do array pessoas para modificar o disabled no botão que fica dentro do ng-repeat? O onclick(disable=z.desabilitado) é uma função do javascript e não reconhece o z. Commented 15/07/2018 às 17:11

1 Resposta 1

0

O exemplo abaixo adiciona e remove em uma empresa e para facilitar isso foi criado um campo a mais em pessoas com o nome de status para controlar a medida que é adicionado e/ou removido, exemplo:

var a = angular.module("2", []);
a.controller("controller", function($scope) {
  $scope.pessoas = [{
      nome: "Rodrigo",
      data: "18/01/1991",
      id: "1",
      status: false
    },
    {
      nome: "Ana",
      data: "12/04/1959",
      id: "2",
      status: false
    },
    {
      nome: "Teresa",
      data: "19/07/1984",
      id: "3",
      status: false
    }
  ];
  $scope.empresa = [];
  $scope.adicionarContatos = function(pessoa) {  
    pessoa.status = true;
    $scope.empresa.push(angular.copy(pessoa));
    console.log($scope.empresa);
  };
  $scope.removerContato = function(pessoa) {
    pessoa.status = false;
    $scope.empresa.pop(pessoa);
    console.log($scope.empresa);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app="2" ng-controller="controller">
  <table>
    <tr>
      <th>Nome</th>
      <th>Data</th>
    </tr>
    <tr data-ng-repeat="z in pessoas">
      <td data-ng-bind="z.nome"></td>
      <td data-ng-bind="z.data"></td>
      <td>
        <button class="btn btn-sucess fa fa-shopping-cart" ng-click="adicionarContatos(z)" ng-disabled="z.status">Adicionar Empresa</button>
        <button class="btn btn-sucess fa fa-shopping-cart" ng-click="removerContato(z)" ng-disabled="!z.status">Remover Empresa</button>
      </td>
    </tr>
  </table>
</div>

2
  • Obrigado, Virgílio. Consegui adaptar e funcionou! Commented 16/07/2018 às 4:10
  • Caro @RodrigoFerraz se for útil marque como responda a sua pergunta...
    – novic
    Commented 16/07/2018 às 16:05

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 .