AngularJS, BootstrapUI : Toggle a button

Question

I have a list of javascript objects I do an ng-repeat on.

I associate each of them a toggle button from UI-Bootstrap.

I want the toggle button to be toggeled depending on the value in my javascript model.

var app = angular.module('App', []);
app.controller('Ctrl', function($scope) {
    $scope.list = [{a : '10'},
                  {a : '20'},
                  {a : '42'}];

});

<div ng-repeat="data in list">
      {{data.a}}      <button type="button" class="btn btn-primary" ng-model="data.state" btn-checkbox="">TEST</button>
</div>

http://plnkr.co/edit/JcnzNSKhy68dXtGHlXLe?p=preview

For example, in this case I want the button associated with a = 42 to be already toggeled

Edit : The data from the list are fetched from a GET request so I it's can't be statically written

What do you mean by toggled? Do you want to add/remove a class on the button? — Robert Hickman
– Robert Hickman, Commented Sep 1, 2015 at 16:16
Depending on what condition? You can loop through your list in the controller and set the state. — Robert Hickman
– Robert Hickman, Commented Sep 1, 2015 at 16:22
I updated my answer to set the clicked state. Does that give you the right idea? — Robert Hickman
– Robert Hickman, Commented Sep 1, 2015 at 16:36

Robert Hickman · Accepted Answer · 2015-09-01 16:31:45Z

1

I'm not sure if this is exactly what you are looking for, but you can add ng-click to the button:

<button type="button" class="btn"
    ng-class="{'btn-primary': data.state}"
    ng-model="data.state"
    ng-click="data.state = !data.state">
        TEST
</button>

EDIT

You can set the state in your controller:

var app = angular.module('App', []);
app.controller('Ctrl', function() {
    var _this = this;
    _this.list = [{a : '10'},
                  {a : '20'},
                  {a : '42'}];

    var i;
    for (i = 0; i < _this.list.length; i++) {
      if (_this.list[i].a == 42) {
        _this.list[i].state = true;
      }
    }  
});

http://plnkr.co/edit/C8NW5h4pzfzBxrCSntDs?p=preview

edited Sep 1, 2015 at 16:31

answered Sep 1, 2015 at 16:20

Robert Hickman

1,1771 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jusopi · Accepted Answer · 2015-09-01 17:12:12Z

1

While the above answer works, I'd argue that the more Angular approach to this is to use a directive. And it is one less attribute to account for.

html

<button class="btn" nx-toggle ng-model="data.state">toggle</button>

javascript

app.directive('nxToggle', function() {

    return {
      restrict: 'A',
      require: 'ngModel',
      link: function($scope, elem, attrs, ngModel) {
        $scope.$watch(function() {
          return ngModel.$modelValue
        }, function(val) {
          if (val == true)
            elem.addClass('btn-primary')
          else
            elem.removeClass('btn-primary')
        })

        elem.bind('click', function() {
          $scope.$apply(function() {
            if (ngModel.$modelValue == true)
              ngModel.$setViewValue(false)

            else
              ngModel.$setViewValue(true)
          })
        }) 
      }
    }
  })

http://plnkr.co/edit/bq4roWHUUlaBnj5xr31Z?p=preview

answered Sep 1, 2015 at 17:12

jusopi

6,8133 gold badges37 silver badges44 bronze badges

1 Comment

Robert Hickman Over a year ago

+1 Great addition! You're probably right about it being a bit more "Angular," but sometimes you want the quick and dirty approach ;)

Collectives™ on Stack Overflow

AngularJS, BootstrapUI : Toggle a button

2 Answers 2

Comments

html

javascript

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

html

javascript

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related