2
I have to mount three buttons and validate them at the angle, following the schematic:
4 answers
6
I understood that you want to select and be marked the item:
Minimal example:
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>-
How can I change the background color to green ?
-
opa @alexjosesilva qual fundo amigo? se fala do que exatamente?
-
The bottom of the button, when pass the mouse turn Green!
-
@alexjosesilva if he is talking the event of hovering over or the event of clicking and turning green?
-
That’s @Virgilio Novic!
-
@alexjosesilva which event? because, is already turning green in the click that is the most logical!
2
Using Boostrap and 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>-
How can I change the button background color to green ??
-
@alexjosesilva altered to do the way you wanted
0
Bringing Angularjs ng-click functions:
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
If you are using Angular with Bootstrap, a very popular CSS HTML framework, focused on responsiveness, can assemble using the following code:
<!-- 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>The main point is the class btn-group, that groups the buttons inside the div. This example goes further and uses buttons with different styles from the classes btn-info, btn-Primary and btn-Danger (see the documentation) and responsiveness from classes Hidden, responsible for hiding the text of buttons below certain screen size.
Browser other questions tagged javascript html css angularjs html5
You are not signed in. Login or sign up in order to post.
I did not understand well, validate would be when clicking a different button mark with green as example above?
– novic
That! in addition to changing the button color. send via post to another page in order to be assigned to a request!
– alexjosesilva
Your question is very limited to the buttons changing the color when they are selected, you can attach this and ask a new question, and if any answer served to remove the accepted doubt as an answer. See, in your initial question you don’t have the requisition part and here we answer the questions as per the question. You can open a new explained plus what you need referring to this.
– novic