我有 Angular Material 测试代码:
<div class="radioButtondemoBasicUsage" ng-app="MyApp">
<form ng-submit="submit()" ng-controller="AppCtrl">
<p>Selected Value: <span class="radioValue">{{ data.group1 }}</span> </p>
<md-radio-group ng-model="data.group1">
<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>
<hr>
<p>Selected Value: <span class="radioValue">{{ data.group2 }}</span></p>
<md-radio-group ng-model="data.group2" class="md-primary">
<md-radio-button ng-repeat="d in radioData" ng-value="d.value" ng-disabled=" d.isDisabled " ng-class="{'md-align-top-left': $index==1}">
{{ d.label }}<br>
<span class="ipsum" ng-if="$index == 1">
Duis placerat lectus et justo mollis, nec sodales orci congue. Vestibulum semper non urna ac suscipit.
Vestibulum tempor, ligula id laoreet hendrerit, massa augue iaculis magna,
sit amet dapibus tortor ligula non nibh.
</span>
</md-radio-button>
</md-radio-group>
<p>
<md-button class="md-raised" ng-click="addItem()" type="button">Add</md-button>
<md-button class="md-raised" ng-click="removeItem()" type="button">Remove</md-button>
</p>
<hr>
<p style="margin-bottom: 0;">Graphic radio buttons need to be labeled with the <code>aria-label</code> attribute.</p>
<p style="margin-top: 0;">Selected Avatar: <span class="radioValue">{{ data.group3 }}</span></p>
<md-radio-group ng-model="data.group3">
<md-radio-button ng-repeat="it in avatarData" ng-value="it.value" aria-label="{{it.title}}">
<md-icon md-svg-icon="{{it.id}}"></md-icon>
</md-radio-button>
</md-radio-group>
</form>
</div>
https://material.angularjs.org/0.11.1/#/demo/material.components.radioButton
它在 codepen 中工作正常，但当我尝试在本地打开它时出现错误。
我尝试安装 Angular 或从 CDN 放置指向 js/css 的链接，但它不起作用:(
Sb可以帮助我吗？
最佳答案
您可能忘记添加 html/body 标签和脚本。 尝试添加这个本地，它应该可以工作。
http://codepen.io/anon/pen/PPWKWy
HTML
<html lang="en" ng-app="StarterApp">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<meta name="viewport" content="initial-scale=1" />
</head>
<body layout="column" ng-controller="AppCtrl">
<!-- Content -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.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-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.4/angular-material.min.js"></script>
</body>
</html>
JS
var app = angular.module('StarterApp', ['ngMaterial']);
app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
$scope.toggleSidenav = function(menuId) {
$mdSidenav(menuId).toggle();
};
}]);
编辑: 如果这是问题所在，并且您确实想学习 AngularJS，请尝试在 https://www.udemy.com/ 上查找类(class)。 他们经常免费赠送精彩的类(class)。
关于javascript - Angular Material - 如何开始？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32863758/