垫子单选按钮不起作用答案

【问题标题】：mat-radio-button not working垫子单选按钮不起作用
【发布时间】：2018-07-11 15:49:14
【问题描述】：

我正在使用 Angular js 材料创建一个应用程序。我已正确包含日期选择器，但无法添加 mat-radio-button，我不知道为什么它没有显示。

这是我的 HTML 页面

<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">

    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <md-content>
      <h4>Standard date-picker</h4>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
      <h4>Disabled date-picker</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker>
      <h4>Date-picker with min date and max date</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date"
       md-min-date="minDate" md-max-date="maxDate"></md-datepicker>

       <mat-radio-group>
  <mat-radio-button value="1">Option 1</mat-radio-button>
  <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>
    </md-content>
  </div>
  </body>
</html>

这是js代码

angular.module('datepickerBasicUsage, MatRadioModule ', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
  $scope.myDate = new Date();
  $scope.minDate = new Date(
    $scope.myDate.getFullYear(),
    $scope.myDate.getMonth() - 2,
    $scope.myDate.getDate());
  $scope.maxDate = new Date(
    $scope.myDate.getFullYear(),
    $scope.myDate.getMonth() + 2,
    $scope.myDate.getDate());
});

【问题讨论】：

标签： angularjs angularjs-material

【解决方案1】：

这是因为 mat-radio-button 指令属于 Angular Material 库。

使用 AngularJS 材质库，你必须使用md-radio-button。

<!doctype html>
<html ng-app="datepickerBasicUsage">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">

    <script src="app.js"></script>
  </head>
  <body>

  <div ng-controller="AppCtrl" style='padding: 40px;'>
    <md-content>
      <h4>Standard date-picker</h4>
      <md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
      <h4>Disabled date-picker</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date" disabled></md-datepicker>
      <h4>Date-picker with min date and max date</h4>
      <md-datepicker ng-model="myDate" placeholder="Enter date"
       md-min-date="minDate" md-max-date="maxDate"></md-datepicker>

       <md-radio-group>
         <md-radio-button value="1">Option 1</md-radio-button>
         <md-radio-button value="2">Option 2</md-radio-button>
       </md-radio-group>
    </md-content>
  </div>
  </body>
</html>

【讨论】：

@RomilTomar 不客气！如果它解决了问题，请不要忘记将答案标记为已接受。