Angularjs mat单选按钮不工作
我正在使用angular js材质创建一个应用程序。我已经包括日期选择器正确,但无法添加垫单选按钮,我不知道为什么它没有显示 这是我的HTML页面Angularjs mat单选按钮不工作,angularjs,angularjs-material,Angularjs,Angularjs Material,我正在使用angular js材质创建一个应用程序。我已经包括日期选择器正确,但无法添加垫单选按钮,我不知道为什么它没有显示 这是我的HTML页面 <!doctype html> <html ng-app="datepickerBasicUsage"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></sc
<!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>
发生这种情况是因为
mat单选按钮
指令属于角度材质库
使用AngularJS材质库时,必须使用md单选按钮
<!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>
标准日期选择器
禁用日期选择器
具有最小日期和最大日期的日期选择器
选择1
选择2
@RomilTomar不客气!如果答案解决了问题,别忘了把它标记为已接受。
<!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>