Угловые материалы - как начать?

0

У меня есть тестовый код угловых материалов:

<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, но я получаю ошибки, когда пытаюсь открыть его локально.

Я попытался установить угловые или поместить ссылки на js/css из CDN, но он не работает :(

Sb может мне помочь?

  • 0
    какие ошибки?
  • 0
    Я имею в виду, что вы помещаете весь этот код в <html> </ html>, по крайней мере, верно? и угловой сценарий наверху
Теги:
angular-material

1 ответ

1
Лучший ответ

Вероятно, вы забыли добавить теги 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();
  };

}]);

edit: Если это проблема, и вы действительно хотите изучить AngularJS, попробуйте найти курс на https://www.udemy.com/. Они часто дают отличные курсы бесплатно.

  • 0
    этот код работает :( я пытаюсь скачать zip и начать: выбранное значение: {{data.group1}} яблоко банановое манго
  • 0
    Странно, у меня это работает. Вы распаковали это? Загрузите почтовый индекс от codepen. Откройте zip-файл - создайте новую папку - перетащите все в эту папку - откройте индекс с помощью браузера.
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню