Twitter Bootstrap Question posted in

Find out if Twitter Bootstrap checkbox button has been clicked

I am new to AngularJS and could really use some help. I have a button that’s shown below that is part of a form. I need to show a modal when the form is submitted if the button is not clicked. How can I perform this check? I have tried several things with no luck. 

<button ng-repeat="car in cars" btn-checkbox-false
        class="btn btn-default btn-block text-left"
        ng-click="AddRemoveCar(cars)">
    <i ng-show="carInStock(cars)"
       class="fa fa-check pull-right btn-success btn btn-xs" />
    <i ng-show="!carInStock(cars)"
       class="fa fa-plus pull-right btn-warning btn btn-xs" />
    {{car.Model}}
</button>
Tags:

2

Answers


  1. 0

    I would be setting up some flag on the button click and check that value on form submit.

    In my controller define a variable like btnClickedFlag = false;

    In Button click function:

    AddRemoveCar(cars) => {
   this.btnClickedFlag = true;
}

    Now on form submit , you can just check if btnClickedFlag is true if not display your modal/dialogue/overlay on screen.

    Login or Signup to reply.
  2. 0

    Consider using the UI-Bootstrap uib-btn-checkbox directive for your Twitter Bootstrap checkboxes.

    The uib-btn-checkbox directive, makes a group of Twitter Bootstrap buttons behave like a set of checkboxes.

    Then your submit function can check the state of the model as bound with the ng-model directive.

    For more information, see

    The DEMO1

    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('ButtonsCtrl', function ($scope) {
  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };
  $scope.$watchCollection('checkModel', function () {
    $scope.checkResults = [];
    angular.forEach($scope.checkModel, function (value, key) {
      if (value) {
        $scope.checkResults.push(key);
      }
    });
  });
})
    <script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<link href="//unpkg.com/bootstrap@3/dist/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="ui.bootstrap.demo" ng-controller="ButtonsCtrl">
    <h4>Checkbox</h4>
    <pre>Model: {{checkModel}}</pre>
    <pre>Results: {{checkResults}}</pre>
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="checkModel.left" 
               uib-btn-checkbox>Left</label>
        <label class="btn btn-primary" ng-model="checkModel.middle"
               uib-btn-checkbox>Middle</label>
        <label class="btn btn-primary" ng-model="checkModel.right"
               uib-btn-checkbox>Right</label>
    </div>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search