2

Tenho de montar três botões e validar-los no angular, seguindo o esquema:

inserir a descrição da imagem aqui

3
  • Não entendi bem, validar seria quando clicar em um botão diferente marcar com verde como exemplo acima?
    – novic
    Commented 10/02/2017 às 13:07
  • Isso! além de alterar a cor do botão. enviar via post para outra pagina afim de ser atribuido numa requisição! Commented 10/02/2017 às 14:51
  • 1
    A sua pergunta é bem limitada aos botões trocarem a cor quando são selecionados, pode anexar essa e fazer uma nova pergunta, e se alguma resposta serviu para tirar a duvida aceite como resposta. Veja, na sua pergunta inicial não tem a parte da requisição e aqui nos respondemos as duvidas conforme a pergunta. Pode abrir uma nova explicado mais o que precisa referenciando a essa.
    – novic
    Commented 10/02/2017 às 14:55

4 Respostas 4

6

Entendi que deseja selecionar e ficar marcado o item:

Exemplo minimo:

var app = angular.module("app", []);
app.controller("ctrl", ["$scope",
  function($scope) {
    $scope.btns = [{
      name: "btn1",
      title: "Sim",
      status: true
    }, {
      name: "btn2",
      title: "Não consta",
      status: false
    }, {
      name: "btn3",
      title: "Não",
      status: false
    }];
    $scope.checkStatus = function(btn) {
      $scope.setStatus(false);
      btn.status = true;
    }

    $scope.setStatus = function(sts) {
      angular.forEach($scope.btns, function(obj, v) {
        obj.status = sts;
      });
    }
  }
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div ng-app="app" ng-controller="ctrl">
  <div class="btn-group" data-toggle="buttons">
    <label ng-class="btn.status?'btn btn-success active':'btn btn-info'" ng-click="checkStatus(btn)" ng-repeat="btn in btns">
      <input type="checkbox" ng-checked="btn.status" autocomplete="off">{{btn.title}}
    </label>
  </div>
</div>

6
  • Como posso alterar a cor de fundo, para verde ? Commented 10/02/2017 às 14:29
  • opa @alexjosesilva qual fundo amigo? se fala do que exatamente?
    – novic
    Commented 10/02/2017 às 14:30
  • O fundo do botão, quando passar o mouse virar Verde! Commented 10/02/2017 às 14:32
  • @alexjosesilva se está falando o evento de passar o mouse por cima ou o evento de clicar e ficar verde?
    – novic
    Commented 10/02/2017 às 14:33
  • ISso memso @Virgilio Novic! Commented 10/02/2017 às 14:49
2

Utilizando Boostrap e Button Group:

angular
  .module('app', []);

angular
  .module('app')
  .controller('ClassesController', ClassesController);

ClassesController.$inject = [];

function ClassesController() {}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="app">
  <div ng-controller="ClassesController as classes">
    <div class="btn-group" role="group" aria-label="...">
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverSim}" ng-mouseenter="hoverSim = true" ng-mouseleave="hoverSim = false">Sim</button>
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverNaoConsta}" ng-mouseenter="hoverNaoConsta = true" ng-mouseleave="hoverNaoConsta = false">Não Consta</button>
      <button type="button" class="btn btn-default" ng-class="{'btn-success': hoverNao}" ng-mouseenter="hoverNao = true" ng-mouseleave="hoverNao = false">Não</button>
    </div>
  </div>
</div>

2
  • Como posso alterar a cor de fundo do botão, para verde ?? Commented 10/02/2017 às 14:29
  • @alexjosesilva alterei para fazer da forma que você queria
    – Sorack
    Commented 10/02/2017 às 15:43
0

Trazendo as funçõs ng-click do AngularJS:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.message = "";
    $scope.sim = function() {
    $scope.message = "Clicou Sim";      
    }
    $scope.naoConsta = function() {
    $scope.message = "Clicou Não Consta";      
    }
    $scope.nao = function() {
    $scope.message = "Clicou Não";      
    }
});
.msg {
  padding: 16px;
  margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div class="btn-group" role="group" aria-label="...">
  <button ng-click="sim()" type="button" class="btn btn-primary">Sim</button>
  <button ng-click="naoConsta()" type="button" class="btn btn-default">Não Consta</button>
  <button ng-click="nao()" type="button" class="btn btn-default">Não</button>
</div>
  <div class="msg" ng-show="message">{{message}}</div>
 </body>

0
0

Se você estiver usando Angular com Bootstrap, um framework HTML, CSS muito popular, focado em responsividade, pode montar utilizando o seguinte código:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn-group flex-btn-group-container">
  <button type="submit" class="btn btn-info btn-sm">
    <span class="glyphicon glyphicon-eye-open"></span>
    <span class="hidden-xs hidden-sm">Sim</span>
  </button>
  <button type="submit" class="btn btn-primary btn-sm">
    <span class="glyphicon glyphicon-pencil"></span>
    <span class="hidden-xs hidden-sm">Não consta</span>
  </button>
  <button type="submit" class="btn btn-danger btn-sm">
    <span class="glyphicon glyphicon-remove-circle"></span>
    <span class="hidden-xs hidden-sm">Não</span>
  </button>
</div>

O ponto principal é a classe btn-group, que agrupa os botões dentro da div. Este exemplo vai mais além e utiliza botões com diferentes estilos a partir das classes btn-info, btn-primary e btn-danger (consulte a documentação) e responsividade a partir das classes hidden, responsáveis por esconder o texto dos botões abaixo de certo tamanho de tela.

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 .