CODEWITHSUNDEEP
javascriptangularjstwitter-bootstrap
Janey
Janey

Reputation: 1310

AngularJS passing bootstrap button group value to controller

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

Upvotes: 1

Views: 1995

Answers (3)

sajalsuraj
sajalsuraj

Reputation: 992

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

Upvotes: 2

Amit Sirohiya
Amit Sirohiya

Reputation: 333

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);
    }
}]);

Upvotes: 2

Ken Bellows
Ken Bellows

Reputation: 6930

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.

Upvotes: 1

Related Questions