current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite
1

I am using Buttons (ui.bootstrap.buttons) from UI Bootstrap and I want to link the state of the button with a variable in a array.

This is my controller:

angular.module('test')
.controller('btest',
    ['$scope',
     '$log',
     function ($scope, $log) {
         $log.info("controller Loaded!");
         var checkboxes = [false,false];

         $scope.pos1 = checkboxes[0];
         $scope.pos2 = checkboxes[1];

     }])

This is a part of the HTML:

<div class="row">
<button type="button" class="col-md-1 btn btn-primary" ng-model="pos1" uib-btn-checkbox>B1</button>
<button type="button" class="col-md-1 btn btn-primary" ng-model="pos2" uib-btn-checkbox>B2</button>
</div>

By clicking a button it does not change the value inside checkboxes array but only of his variable.

For example: after the click on "B1" pos1=truewhilecheckboxes[0]=false.

I can force the update of the vector using an update function like this:

$scope.update = function(index) {
             checkboxes[index] = !checkboxes[index];
}

But I think it is not the right way.

Can someone explain me how I can link the state of button with his variable inside checkboxes array.

share|improve this question
up vote 1 down vote accepted

You could try:

angular.module('test')
.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $log.info("controller Loaded!");
     $scope.checkboxes = [false,false];

  }])


<div class="row">
  <button type="button" class="col-md-1 btn btn-primary" ng-model="checkboxes[0]" uib-btn-checkbox>B1</button>
  <button type="button" class="col-md-1 btn btn-primary" ng-model="checkboxes[1]" uib-btn-checkbox>B2</button>
</div>

uib-btn-checkbox will always set the value of whatever is in your ng-model. So I've put the checkboxes array on the scope and used it instead.

The confusion that you seem to have is that you expected pos1 and pos2 to hold the reference to your checkbox array values. JavaScript (and most other languages) don't work like that. So your code would be equivalent to:

angular.module('test')
.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $log.info("controller Loaded!");

     $scope.pos1 = false;
     $scope.pos2 = false;

 }])
share|improve this answer
up vote 1 down vote

It's better if done in this way:

<div class="row">
  <button type="button" class="col-md-1 btn btn-primary" ng-repeat="checkbox in checkboxes" ng-click="checkbox.isChecked = !checkbox.isChecked" ng-model="checkbox.isChecked" uib-btn-checkbox>{{checkbox.text}}</button>
</div>

And in your controller:

.controller('btest',
  ['$scope',
   '$log',
   function ($scope, $log) {
     $scope.checkboxes = [
       {
          text: "B1"
       },
       {
          text: "B2"
       }
     ];
     $scope.checkboxes.forEach(function(checkbox) {
       checkbox.isChecked = false;
     });
 }])

This avoids code repetition, and also makes it easier to maintain!

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.