admin管理员组

文章数量:1336645

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.

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="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?

  • javascript
  • angularjs
  • angular-material
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Aug 7, 2015 at 8:25 dearn44dearn44 3,4324 gold badges37 silver badges71 bronze badges
Add a ment  | 

2 Answers 2

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>

本文标签： javascriptRadiobutton wont react to ngchange directiveStack Overflow

版权声明：本文标题：javascript - Radiobutton wont react to ng-change directive - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742274490a2444937.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。