Question

我有角度材料测试代码：

<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中运行良好，但是当我尝试在本地打开它时会出错。

我尝试从CDN安装角度或链接到js / css但它不起作用：（

Sb可以帮助我吗？

Answer 1

您可能忘记添加html / body标签和脚本。尝试添加这个localy，它应该工作。

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/上查找课程他们经常免费赠送很棒的课程。

角度材料 - 如何开始？

1 个答案: