Warum ist mein Material AngularJS (CSS) nicht so funktioniert wie in der demo zur Verfügung?

Ich bin ein total Neuling in die Welt von AngularJS. Allerdings möchte ich implementieren, die material design-version von AngularJS zur Erstellung eines Formulars.

Also folgte ich der getting-started Anweisungen und versuchte, etwas zu tun, aber es sah nicht wie auf der Website. So, ich kopierte eine basic-demo von Codepen

Ich denke, ich habe alle notwendigen Dateien.
Aber ich bin noch nicht in der Lage, um es so Aussehen wie die auf Codepen.
Ich bin ziemlich sicher, dass es einige CSS-Problem, aber ich bin nicht in der Lage, legen Sie einen finger auf, der.

Folgendes ist mein Code:

JS:

angular
  .module('MyApp')
  .controller('DemoCtrl', function($scope) {
    $scope.user = {
      title: 'Developer',
      email: '[email protected]',
      firstName: '',
      lastName: '',
      company: 'Google',
      address: '1600 Amphitheatre Pkwy',
      city: 'Mountain View',
      state: 'CA',
      biography: 'Loves kittens, snowboarding, and can type at 130 WPM.\n\nAnd rumor has it she bouldered up Castle Craig!',
      postalCode: '94043'
    };
  })
  .config(function($mdThemingProvider) {

    //Configure a dark theme with primary foreground yellow

    $mdThemingProvider.theme('docs-dark', 'default')
      .primaryPalette('yellow')
      .dark();

  });

HTML:

<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.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-route.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/angularjs/1.3.15/angular-messages.min.js"></script>


<script src="https://cdn.rawgit.com/angular/bower-material/v0.9.7/angular-material.js"></script>

<div ng-controller="DemoCtrl" layout="column" class="inputdemoBasicUsage" ng-app="MyApp">

  <md-content md-theme="docs-dark" layout-padding="" layout="row" layout-sm="column">
    <md-input-container>
      <label>Title</label>
      <input ng-model="user.title">
    </md-input-container>
    <md-input-container>
      <label>Email</label>
      <input ng-model="user.email" type="email">
    </md-input-container>
  </md-content>

  <md-content layout-padding="">
    <form name="userForm">

      <div layout="" layout-sm="column">
        <md-input-container style="width:80%">
          <label>Company (Disabled)</label>
          <input ng-model="user.company" disabled="">
        </md-input-container>

        <md-input-container flex="">
          <label>Submission Date</label>
          <input type="date" ng-model="user.submissionDate">
        </md-input-container>
      </div>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>First name</label>
          <input ng-model="user.firstName">
        </md-input-container>
        <md-input-container flex="">
          <label>Last Name</label>
          <input ng-model="theMax">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Address</label>
        <input ng-model="user.address">
      </md-input-container>
      <md-input-container md-no-float="">
        <input ng-model="user.address2" placeholder="Address 2">
      </md-input-container>

      <div layout="" layout-sm="column">
        <md-input-container flex="">
          <label>City</label>
          <input ng-model="user.city">
        </md-input-container>
        <md-input-container flex="">
          <label>State</label>
          <input ng-model="user.state">
        </md-input-container>
        <md-input-container flex="">
          <label>Postal Code</label>
          <input ng-model="user.postalCode">
        </md-input-container>
      </div>

      <md-input-container flex="">
        <label>Biography</label>
        <textarea ng-model="user.biography" columns="1" md-maxlength="150"></textarea>
      </md-input-container>


    </form>
  </md-content>

</div>

Jede Hilfe ist willkommen. Danke!

InformationsquelleAutor Arcanyx | 2015-06-03
Schreibe einen Kommentar