Tenho de montar três botões e validar-los no angular, seguindo o esquema:
-
Não entendi bem, validar seria quando clicar em um botão diferente marcar com verde como exemplo acima?– novicCommented 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!– alexjosesilvaCommented 10/02/2017 às 14:51
-
1A 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.– novicCommented 10/02/2017 às 14:55
Adicione um comentário
|
4 Respostas
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>
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>
-
Como posso alterar a cor de fundo do botão, para verde ?? Commented 10/02/2017 às 14:29
-
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>
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.