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

Question

这个问题链接到。

在尝试对这些答案的建议进行试验时，我运行遇到了一些麻烦。我尝试做的是做同样的事情，但使用官方 angular material 示例，如下所示：

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

此代码的问题在于，我用于检查所选单选按钮值的函数从未被调用。

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

Answer 1

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

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

尝试：

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

Answer 2

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

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

Radiobutton wont react to ng-change directive

javascript

angularjs

angular-material