Может ли кто-нибудь показать мне рабочий jsFiddle или Plunker для текстовых входов с угловым материалом?

Question

Я попытался это сделать, но он оказался неустановленным. Я не могу найти что-либо в stackoverflow, что предполагает, что библиотека углового материала может работать за пределами углового веб-сайта.

Inputs in material design are not themed

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

Почему бы вам не использовать это?

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

Answer 2

Ну, я получил его на работу. 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>