Get ng-model value in controller when using bootstrap ui radio button

Question

I can't seem to get the value of my radio button back into the controller...

HTML

<div class="btn-group-wrap">
  <div class="btn-group listBtn text-center">
    <label uib-btn-radio="0" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">0</label>
    <label uib-btn-radio="1" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">1</label>
    <label uib-btn-radio="undefined" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">undefined</label>
  </div>
</div>
<p>filter {{changeDataset}}</p> //i see the change here!!

CONTROLLER

$scope.changeDataset = undefined


$scope.newDataset = function () {
  console.log('new dataset function called');
  console.log('the dataset= '+$scope.changeDataset) //but it just returns undefined here!!!
  console.log('the vacated= '+$scope.filter.vacated)
};

It recognises that the function is running, but it always just logs undefined.

If the radio buttons are linked together (ie only one choice possible) then he needs to keep the same ng-model for them. — rrd, May 26 '17 at 09:31
Did you declared '$scope.changeDataset' ? before using it into function? — the_mishra, May 26 '17 at 09:32
@the_mishra yes, it still doesn't pick up the value of the radio button... — Janey, May 26 '17 at 09:36

score 0 · Answer 1 · answered May 26 '17 at 09:40

Your code works, the undefined appears in console because you try to log $scope.filter.vacated, which is set to undefined.

Here is a snippet demo of your code working:

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ButtonsCtrl', function ($scope) {
  $scope.filter = {
    vacated: undefined
  };
  
  $scope.newDataset = function () {
    console.log('new dataset function called');
    console.log('the dataset= ' + $scope.changeDataset);
    console.log('the vacated= ' + $scope.filter.vacated);
  };
});

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>

<div ng-controller="ButtonsCtrl">
    <pre>{{changeDataset}}</pre>
    <div class="btn-group">
        <label uib-btn-radio="0" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">0</label>
        <label uib-btn-radio="1" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">1</label>
        <label uib-btn-radio="undefined" ng-change="newDataset()" ng-model="changeDataset" class="btn btn-default">undefined</label>
    </div>
</div>
</html>

it doesnt work on my machine... could it be to do with the bootstrap / angular version? angular=1.5.9 bootstrap = 3.3.7 — Janey, May 26 '17 at 10:06
@Janey Nah, don't think so. Maybe a typo error somewhere? Check again, try to compare with my snippet... :-) — Mistalis, May 26 '17 at 10:08
nope, copy and pasting to my code still returns undefined for $scope.changeDataset... — Janey, May 26 '17 at 10:14

score -1 · Accepted Answer · answered May 26 '17 at 11:32

-1

I fixed this by changing ng-model="changeDataset" to ng-model="$parent.changeDataset"

$parent - maps to the the scope containing the current scope

answered May 26 '17 at 11:32

Janey

1,260
3
17
39

Get ng-model value in controller when using bootstrap ui radio button

2 Answers2