Disable buttons

Asked

Viewed 227 times

0

The two buttons "delete participant" and "forward for authorization" must be disabled as soon as there is no participant registered in the event, fields(Cpf, name, situation...etc).

<div class="col-md-5">
    <button type="button"
                class="btn btn-primary"
                value="Autorização"
                title="Encaminhar para Autorização"
                ng-click="encaminharParticipanteAutorizacao(participante.selecionados)">                    
        <span><i class="glyphicon"></i> Encaminhar para Autorização</span>                
    </button>
</div>

ANGULAR

$scope.encaminharParticipanteAutorizacao = function (selecionados)
    {
        if( selecionados === undefined || selecionados === null  ){
            alert('Favor informar pelo menos um participante!');
            return false;
        }

        var bSelected = false;
        angular.forEach(selecionados, function (item) {
            if( item ){
                bSelected = item;
            }
        });

        if(!bSelected){
            alert('Favor informar pelo menos um participante!');
            return false;
        }

        PessoaEventoService.encaminharParticipanteAutorizacao(selecionados)
            .then(function(data){
            })
            .catch(function(err){

        }); 

    }

inserir a descrição da imagem aqui

  • Someone here at stackoverflow can help me ??

1 answer

2


You can use the ng-disabled directive by passing the list of selected or existing participants.

In your example would look something like:

<div class="col-md-5">
    <button type="button"
                ng-disabled="participante.selecionados.length == 0"
                class="btn btn-primary"
                value="Autorização"
                title="Encaminhar para Autorização"
                ng-click="encaminharParticipanteAutorizacao(participante.selecionados)">                    
        <span><i class="glyphicon"></i> Encaminhar para Autorização</span>                
    </button>
</div>

Or if you have a list of participants:

<div class="col-md-5">
        <button type="button"
                    ng-disabled="listaParticipantes.length == 0"
                    class="btn btn-primary"
                    value="Autorização"
                    title="Encaminhar para Autorização"
                    ng-click="encaminharParticipanteAutorizacao(participante.selecionados)">                    
            <span><i class="glyphicon"></i> Encaminhar para Autorização</span>                
        </button>
    </div>

An example of the directive itself ng-disabled:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ng-disabled-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  

  
</head>
<body ng-app="">
  <label>Click me to toggle: <input type="checkbox" ng-model="checked"></label><br/>
<button ng-model="button" ng-disabled="checked">Button</button>
</body>
</html>

<!-- 
Copyright 2017 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Reference: https://docs.angularjs.org/api/ng/directive/ngDisabled

  • Thanks @Rafael Lucena, it worked here.!!

Browser other questions tagged

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