AngularJS passing bootstrap button group value to controller

Question

I have a button group and I want to pass the value of the selected button back to my controller but it isn't working, it just returns undefined...

HTML

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <button type="button" ng-model="activeCustomer" value="active" ng-click="getVal()" class="btn btn-default">Active</button>
        <button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal()" class="btn btn-default">Inactive</button>
        <button type="button" ng-model="activeCustomer" value="all" ng-click="getVal()" class="btn btn-default">All</button>

        {{change}}
    </div>

Controller :

aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
  //set the radio buttons
    $scope.change='the data';
    $scope.getVal=function(){
        console.log($scope.change);
        console.log($scope.activeCustomer);
        $scope.change=$scope.activeCustomer;
    }
}]);

however if I change the code from <button type="button" to <input type="radio" it works! Any ideas? Thanks

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

sajalsuraj · Accepted Answer · 2016-03-14 12:45:57Z

2

here is the working code -

<body ng-app="myApp">
<div ng-controller="myCtrl">
        <button type="button" ng-model="activeCustomer" value="active" ng-click="getVal($event)" class="btn btn-default">Active</button>
        <button type="button" ng-model="activeCustomer" value="inactive" ng-click="getVal($event)" class="btn btn-default">Inactive</button>
        <button type="button" ng-model="activeCustomer" value="all" ng-click="getVal($event)" class="btn btn-default">All</button>

        {{change}}
    </div>


<script>
aap=angular.module('myApp',[])
.controller('myCtrl',["$scope",function($scope){
  //set the radio buttons
    $scope.change='the data';
    $scope.getVal=function(active){
        console.log($scope.change);
        console.log(active.currentTarget.value);
        $scope.change=active.currentTarget.value;
    }
}]);


</script>

You need to pass the $event for each button and access it in controller. Then after you can change the value.

Here is the plunker:-

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

edited Mar 14, 2016 at 12:45

answered Mar 14, 2016 at 12:39

sajalsuraj

1,0021 gold badge18 silver badges35 bronze badges

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

1 Comment

sajalsuraj Over a year ago

always welcome.. glad to know that my answer solved your problem.. :) :)

Amit Sirohiya · Accepted Answer · 2016-03-14 12:41:08Z

HTML

 <div ng-controller="myCtrl">
            <button type="button"
                    value="active"
                    ng-click="getVal('active')"
                    class="btn btn-default">
                Active
            </button>
            <button type="button"
                    value="inactive" 
                    ng-click="getVal('inactive')"
                    class="btn btn-default">
                Inactive
            </button>
            <button type="button"
                    value="all" 
                    ng-click="getVal('all')"
                    class="btn btn-default">
                 All
            </button>
 </div>

Controller :

.controller('myCtrl',["$scope",function($scope){
    $scope.getVal=function(buttonClicked){
        // buttonClicked contains the button name which is clicked
        console.log(buttonClicked);
    }
}]);

Ken Bellows · Accepted Answer · 2016-03-14 12:26:21Z

1

Remember that Bootstrap is just a CSS library that makes things look pretty; it doesn't change the behavior of any browser elements. By default, HTML <button> tags aren't meant to be form elements that represent data, so ng-model doesn't know how to attach to them. If you want a radio button group to work with ng-model, you'll need to use the radio button directive in UI Bootstrap, or some other similar directive.

answered Mar 14, 2016 at 12:26

Ken Bellows

7,01014 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

AngularJS passing bootstrap button group value to controller

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related