javascript - Radiobutton wont react to ng-change directive

This question is linked to this.

While trying to experiment with the suggestions on these answers, I ran into some trouble. What I tried to do is do the same thing but using the official angular material example as can be seen below:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link href="+Icons" rel="stylesheet">
    <link rel='stylesheet prefetch' href='.10.0/angular-material.css'>
</head>

<body ng-app="radioDemo1" layout="row">
<div>
  <form ng-submit="submit()" ng-controller="AppCtrl">
    <div ng-repeat="c in radioData">    
        <md-radio-group class="choice" ng-required="true" ng-change="radioChanged(account)" ng-model="c.selectedValue" >
          <md-radio-button value="Apple" class="md-primary" >Apple</md-radio-button>
          <md-radio-button value="Banana" > Banana </md-radio-button>
          <md-radio-button value="Mango" >Mango</md-radio-button>
        </md-radio-group>
      <div>   
      </form>
    </div>

    <script src='.3.15/angular.js'></script>
    <script src='.3.15/angular-animate.min.js'></script>
    <script src='.3.15/angular-route.min.js'></script>
    <script src='.3.15/angular-aria.min.js'></script>
    <script src='.3.15/angular-messages.min.js'></script>
    <script src='.10.0/angular-material.js'></script>
    <script src='.cdpn.io/t-114/assets-cache.js'></script>
    <script src=".min.js"></script>
    <script src=".1/jquery.ba-throttle-debounce.min.js"></script>

    <script>
        'use strict';
        angular
      .module('radioDemo1', ['ngMaterial'])
      .controller('AppCtrl', function($scope) {
        $scope.data = {
          group1 : '1',
          group2 : '2',
          group3 : '3'
        };

        $scope.radioData = [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: '3', isDisabled: true },
          { label: '4', value: '4' }
        ];
        $scope.radioChanged = function (item) {
            console.log(item);
            if (item.selectedValue == "Apple") {
              $scope.admin = item;
            }
            else if (item == $scope.admin) {
              $scope.admin = undefined;
            }
          };
      })
    </script>
</body>
</html>

The thing with this code is that my function for checking the value of the selected radio button never gets called.

Why is that, and how can I fix this, so the check does get performed?

This question is linked to this.

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
    <link rel='stylesheet prefetch' href='http://cdn.rawgit./angular/bower-material/v0.10.0/angular-material.css'>
</head>

<body ng-app="radioDemo1" layout="row">
<div>
  <form ng-submit="submit()" ng-controller="AppCtrl">
    <div ng-repeat="c in radioData">    
        <md-radio-group class="choice" ng-required="true" ng-change="radioChanged(account)" ng-model="c.selectedValue" >
          <md-radio-button value="Apple" class="md-primary" >Apple</md-radio-button>
          <md-radio-button value="Banana" > Banana </md-radio-button>
          <md-radio-button value="Mango" >Mango</md-radio-button>
        </md-radio-group>
      <div>   
      </form>
    </div>

    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
    <script src='http://cdn.rawgit./angular/bower-material/v0.10.0/angular-material.js'></script>
    <script src='https://s3-us-west-2.amazonaws./s.cdpn.io/t-114/assets-cache.js'></script>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare./ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

    <script>
        'use strict';
        angular
      .module('radioDemo1', ['ngMaterial'])
      .controller('AppCtrl', function($scope) {
        $scope.data = {
          group1 : '1',
          group2 : '2',
          group3 : '3'
        };

        $scope.radioData = [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: '3', isDisabled: true },
          { label: '4', value: '4' }
        ];
        $scope.radioChanged = function (item) {
            console.log(item);
            if (item.selectedValue == "Apple") {
              $scope.admin = item;
            }
            else if (item == $scope.admin) {
              $scope.admin = undefined;
            }
          };
      })
    </script>
</body>
</html>

The thing with this code is that my function for checking the value of the selected radio button never gets called.

Why is that, and how can I fix this, so the check does get performed?

Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Aug 7, 2015 at 8:25 dearn44 3,4324 gold badges37 silver badges71 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

It seems that ng-model and ng-change are only allowed inside an md-radio-group element.

Also as overburn said you have to also be careful when using md-model.

Thus the solution to this issue would be:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />

    <link href="https://fonts.googleapis./icon?family=Material+Icons" rel="stylesheet">
    <link rel='stylesheet prefetch' href='http://cdn.rawgit./angular/bower-material/v0.10.0/angular-material.css'>
</head>

<body ng-app="radioDemo1" layout="row">
<div>
  <form ng-submit="submit()" ng-controller="AppCtrl">
    <div ng-repeat="c in radioData">    
        <md-radio-group class="choice" ng-required="true" ng-change="radioChanged(c)" ng-model="c.selectedValue" >
          <md-radio-button value="Apple" class="md-primary" ng-disabled="admin && item != admin">Apple</md-radio-button>
          <md-radio-button value="Banana" > Banana </md-radio-button>
          <md-radio-button value="Mango" >Mango</md-radio-button>
        </md-radio-group>
      <div>   
      </form>
    </div>

    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
    <script src='https://ajax.googleapis./ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
    <script src='http://cdn.rawgit./angular/bower-material/v0.10.0/angular-material.js'></script>
    <script src='https://s3-us-west-2.amazonaws./s.cdpn.io/t-114/assets-cache.js'></script>
    <script src="http://ajax.googleapis./ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare./ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>

    <script>
        'use strict';
        angular
      .module('radioDemo1', ['ngMaterial'])
      .controller('AppCtrl', function($scope) {
        $scope.data = {
          group1 : '1',
          group2 : '2',
          group3 : '3'
        };

        $scope.radioData = [
          { label: '1', value: 1 },
          { label: '2', value: 2 },
          { label: '3', value: '3', isDisabled: true },
          { label: '4', value: '4' }
        ];
        $scope.radioChanged = function (item) {
            console.log(item);
            if (item.selectedValue == "Apple") {
              $scope.admin = item;
            }
            else if (item == $scope.admin) {
              $scope.admin = undefined;
            }
          };
      })
    </script>
</body>
</html>

You should have the same model on all the radio buttons.

Radio buttons are basically an array of values, so if you put different models on them, they won't actually change because they only have one possible value each.

Try:

<md-radio-group class="choice">
          <md-radio-button ng-model="data.group_unique" value="Apple" class="md-primary" ng-change="radioChanged(account)">Apple</md-radio-button>
          <md-radio-button ng-model="data.group_unique" value="Banana" ng-change="radioChanged(account)"> Banana </md-radio-button>
          <md-radio-button ng-model="data.group_unique" value="Mango" ng-change="radioChanged(account)">Mango</md-radio-button>
</md-radio-group>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Radiobutton wont react to ng-change directive - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)