单选按钮不会对 ng-change 指令做出反应答案

【问题标题】：Radiobutton wont react to ng-change directive单选按钮不会对 ng-change 指令做出反应
【发布时间】：2015-08-07 08:25:14
【问题描述】：

这个问题链接到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.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel='stylesheet prefetch' href='http://cdn.rawgit.com/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.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
    <script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/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>

这段代码的问题是我检查所选单选按钮值的函数永远不会被调用。

为什么会这样，我该如何解决这个问题，才能执行检查？

【问题讨论】：

标签： javascript angularjs angular-material

【解决方案1】：

似乎ng-model 和ng-change 只允许在md-radio-group 元素内。

正如 overburn 所说，使用 md-model 时也要小心。

因此，这个问题的解决方案是：

<!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.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel='stylesheet prefetch' href='http://cdn.rawgit.com/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.com/ajax/libs/angularjs/1.3.15/angular.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js'></script>
    <script src='http://cdn.rawgit.com/angular/bower-material/v0.10.0/angular-material.js'></script>
    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/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>

【讨论】：

【解决方案2】：

您应该在所有单选按钮上使用相同的型号。

单选按钮基本上是一组值，因此如果您在它们上放置不同的模型，它们实际上不会改变，因为它们每个只有一个可能的值。

试试：

<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>

【讨论】：

最初我尝试让我的模型加入无线电组<md-radio-group ng-model="c.group1">，但我得到了控制器'ngModel', required by directive 'ngChange', can't be found!。此外，即使我使用相同的模型，该函数仍然不会被调用。
您需要将模型放在每个按钮上，而不是放在收音机组上
请看this。他们在小组中有模特，这就是我尝试的原因。无论如何，这似乎与我的问题无关。即使您进行了更改，该函数也不会被调用。
奇怪，这似乎有效：codepen.io/anon/pen/aOXraV;那个 ng-repeat 可能是你问题的根源。
问题是我需要重复，因为我不知道可能有多少对象。同样在this，他们建议使用该模型，并且应该在无线电组上进行更改。但是当我尝试它时，我得到了我告诉你的错误。