angularjs - 有人可以向我展示一个用于角度材料文本输入的工作 jsFiddle 或 Plunker 吗？

Question

我试过这样做，但结果是没有样式的。我在 stackoverflow 上找不到任何表明 angular-material 库可以在 angular 网站之外运行的内容。

材料设计中的输入没有主题

http://jsfiddle.net/Lzgts/134/

<script>
    var app = angular.module('myApp', ['ngMaterial', 'ngMessages']);

    app.controller('Ctrl', function($scope) {});
</script>
<div ng-app="myApp">
    <div ng-controller="Ctrl" layout="column" md-theme="green">
        <md-toolbar class="md-primary">
            <h1 class="md-toolbar-tools">
          Top Secret Project
        </h1>
        </md-toolbar>
        <md-button class="md-raised">Button test</md-button>
        <md-content class="md-padding">
            <form name="projectForm">
                <md-input-container>
                    <label>Description</label>
                    <input md-maxlength="30" required name="description" ng-model="project.description">
                    <div ng-messages="projectForm.description.$error">
                        <div ng-message="required">This is required.</div>
                        <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
                    </div>
                </md-input-container>
                <md-input-container>
                    <label>Client Name</label>
                    <input required name="clientName" ng-model="project.clientName">
                    <div ng-messages="projectForm.clientName.$error">
                        <div ng-message="required">This is required.</div>
                    </div>
                </md-input-container>
                <md-input-container>
                    <label>Hourly Rate (USD)</label>
                    <input required type="number" step="any" name="rate" ng-model="project.rate" min="800" max="4999" required>
                    <div ng-messages="projectForm.rate.$error">
                        <div ng-message="required">You've got to charge something! You can't just <b>give away</b> a Missile Defense System.</div>
                        <div ng-message="min">You should charge at least $800 an hour. This job is a big deal... if you mess up, everyone dies!</div>
                        <div ng-message="max">$5,000 an hour? That's a little ridiculous. I doubt event Bill Clinton could afford that.</div>
                    </div>
                </md-input-container>
            </form>
        </md-content>
    </div>
</div>

Answer 1

好吧，我让它工作了。http://geoyws.github.io/angular-mall

<md-content>
  <md-input-container>
    <md-text-float type="text" class="" label="username" ng-model="signUp.username" name="username" required></md-text-float>
  </md-input-container>
  <md-input-container>
    <md-text-float type="password" class="" label="password" ng-model="signUp.password" name="password" required></md-text-float>
  </md-input-container>
  <md-input-container>
    <md-text-float type="password" class="" label="repeat password" ng-model="signUp.repeatPassword" name="repeatPassword" required></md-text-float>
  </md-input-container>
  <md-input-container>
    <md-text-float type="email" class="" label="email" ng-model="signUp.email" name="email" required></md-text-float>
  </md-input-container>
</md-content>

Answer 2

你为什么不用这个？

<md-text-float label="Description" flex ng-model="project.description"> </md-text-float>