Bootstrap button with Angularjs

Question

Bootstrap button with Angularjs

Asked 9 years, 4 months ago

Viewed 684 times

2

How can I change the Button class?

    <!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.1.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div ng-controller="ButtonsCtrl">
        <h4>Radio &amp; Uncheckable Radio</h4>
        <pre>{{radioModel}}</pre>

        <div class="btn-group">
            <label class="ng-class: {{BA}}" ng-model="radioModel" btn-radio="'A'">A</label>
            <label class="ng-class: {{BB}}" ng-model="radioModel" btn-radio="'B'">B</label>
            <label class="{{BC}}" ng-model="radioModel" btn-radio="'C'">C</label>
            <label class="{{BD}}" ng-model="radioModel" btn-radio="'D'">D</label>
            <label class="{{BE}}" ng-model="radioModel" btn-radio="'E'">E</label>
        </div>

    </div>
</body>

</html>

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
    $scope.singleModel = 1;
    $scope.radioModel = '';
    $scope.BA = 'btn btn-default';
    $scope.BB = 'btn btn-default';
    $scope.BC = 'btn btn-default';
    $scope.BD = 'btn btn-default';
    $scope.BE = 'btn btn-default';

    $scope.checkModel = {
        A: false,
        B: false,
        C: false,
        D: false,
        E: false
    };
});

1 answer

Browser other questions tagged twitter-bootstrap angularjs

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

by OnoSendai • **36,218** points · Answer 1 · 2015-07-26T01:37:39+00:00

You came close. The syntax for ng-class needs to be adjusted as in the example below:

angular
    .module('ui.bootstrap.demo', [])
    .controller('ButtonsCtrl', function ($scope) {
    $scope.BA = 'btn btn-default';
    });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app='ui.bootstrap.demo'>
  <div ng-controller="ButtonsCtrl">
    <label ng-class="BA" ng-model="radioModel" btn-radio="'A'">A</label>
  </div>
</div>

_{Update: Treating the example in the comments}

The ternary evaluation format of ng-class is as follows::

ng-class="avaliação ? 'classeCasoVerdadeiro' : 'classeCasoFalso'"

The example mentioned would look like this:

ng-class="radioModel === 'A' ? 'btn btn-primary' : 'btn btn-default'"