Question

此问题与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>

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

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

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元素中使用。

此外，过度使用表示在使用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>

Radiobutton不会对ng-change指令作出反应

2 个答案: