How to mount buttons with Angular?

Navigation
1

I have to mount three buttons and validate them in the angle, following the scheme:

    
asked by anonymous 10.02.2017 / 13:44

4 answers

7

I understand that you want to select and mark the item:

Minimum 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><scriptsrc="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><divng-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>
    
10.02.2017 / 14:37
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><linkrel="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><!--LatestcompiledJavaScript--><scriptsrc="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>
    
10.02.2017 / 13:57
0

Bringing the functions ng-click of 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><!--LatestcompiledandminifiedCSS--><linkrel="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><!--LatestcompiledJavaScript--><scriptsrc="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>
    
10.02.2017 / 14:12
0

If you're using Angular with Bootstrap , a very popular HTML, responsive, CSS framework, you can build 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><!--LatestcompiledJavaScript--><scriptsrc="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 btn-group class, which groups the buttons inside the div. This example goes further and uses buttons with different styles from the btn-info , btn-primary and btn-danger classes (see documentation ) and responsiveness from the hidden classes, responsible for hiding the text of the buttons below a certain screen size.

    
10.02.2017 / 14:17
Display text to mouse position over word or image Enum Value C #