全新的角度.制作一个非常简单的测试应用程序
Brand new to angular. Making a very simple test app. Can't figure something out
我已经学习web开发大约5个月了，这是我第一次尝试使用angular。当我看到一个使用ng-model和{{花括号表达式}}绑定数据的教程时，我想尝试做一个简单的谷歌字体配对应用程序。你输入标题和正文的文本，然后你可以从下拉菜单中为每个选择不同的字体来测试各种字体配对。简单的想法。这是有效的。但我遇到的一个问题是使下拉菜单中的字体名称用那种字体书写。这是我到目前为止所拥有的(对不起，我所包含的CSS只是一堆字体的@imports，所以它可以在测试环境中工作。有点丑):
var app = angular.module("app", []);
app.controller('FontTester', function($scope){
$scope.fonts=["Open Sans", "Roboto", "Roboto Condensed", "Lato", "Oswald","Lora","Source Sans Pro", "PT Sans", "Open Sans Condensed", "Droid Sans", "Raleway", "Montserrat", "Ubuntu", "Droid Serif", "Roboto Slab", "Merriweather", "Arimo", "PT Sans Narrow", "Noto Sans", "Bitter", "Titillium Web", "Lobster", "PT Serif", "Oxygen", "Dosis", "Hind", "Cabin", "Arvo", "Fjalla One", "Playfair Display", "Vollkorn", "Abel", "Bree Serif", "Muli", "Poiret One", "Francois One", "Noto Serif", "Nunito", "Signika", "Play", "Inconsolata", "Ubuntu Condensed", "Archivo Narrow", "Anton", "Cuprum", "Alegreya", "Pacifico", "Karla", "Libre Baskerville", "Josephin Sans", "Asap", "Maven Pro", "Rokkitt", "Merriweather Sans", "Monda", "Dancing Script", "Quicksand", "Exo", "Varela Round", "PT Sans Caption", "Crimson Text", "Crete Round", "Questrial", "Pathway Gothic One", "Fira Sans", "Ropa Sans", "Abril Fatface", "Armata", "Patua One", "News Cycle", "Pontano Sans", "Istok Web", "Gudea", "Josephin Slab", "Noticia Text", "EB Garamond", "Cabin Condensed", "Jura", "Sanchez", "Lobster Two", "BenchNine", "Quattrocento Sans", "Old Standard TT", "Courgette", "Ruda", "Playball", "Alfa Slab One", "Righteous", "Kreon", "Passion One"].sort();
})@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import url(http://fonts.googleapis.com/css?family=Roboto);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed);
@import url(http://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);
@import url(http://fonts.googleapis.com/css?family=Droid+Sans);
@import url(http://fonts.googleapis.com/css?family=Raleway);
@import url(http://fonts.googleapis.com/css?family=Monterrat);
@import url(http://fonts.googleapis.com/css?family=Ubuntu);
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);
@import url(http://fonts.googleapis.com/css?family=Merriweather);
@import url(http://fonts.googleapis.com/css?family=Arimo);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
@import url(http://fonts.googleapis.com/css?family=Noto+Sans);
@import url(http://fonts.googleapis.com/css?family=Bitter);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=PT+Serif);
@import url(http://fonts.googleapis.com/css?family=Oxygen);
@import url(http://fonts.googleapis.com/css?family=Dosis);
@import url(http://fonts.googleapis.com/css?family=Hind);
@import url(http://fonts.googleapis.com/css?family=Cabin);
@import url(http://fonts.googleapis.com/css?family=Arvo);
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
@import url(http://fonts.googleapis.com/css?family=Playfair+Display);
@import url(http://fonts.googleapis.com/css?family=Vollkorn);
@import url(http://fonts.googleapis.com/css?family=Abel);
@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=Muli);
@import url(http://fonts.googleapis.com/css?family=Poiret+One);
@import url(http://fonts.googleapis.com/css?family=Francois+One);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif);
@import url(http://fonts.googleapis.com/css?family=Nunito);
@import url(http://fonts.googleapis.com/css?family=Signika);
@import url(http://fonts.googleapis.com/css?family=Play);
@import url(http://fonts.googleapis.com/css?family=Inconsolata);
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Condensed);
@import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);
@import url(http://fonts.googleapis.com/css?family=Anton);
@import url(http://fonts.googleapis.com/css?family=Cuprum);
@import url(http://fonts.googleapis.com/css?family=Alegreya);
@import url(http://fonts.googleapis.com/css?family=Pacifico);
@import url(http://fonts.googleapis.com/css?family=Karla);
@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville);
@import url(http://fonts.googleapis.com/css?family=Josephin+Sans);
@import url(http://fonts.googleapis.com/css?family=Asap);
@import url(http://fonts.googleapis.com/css?family=Maven+Pro);
@import url(http://fonts.googleapis.com/css?family=Rokkitt);
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans);
@import url(http://fonts.googleapis.com/css?family=Monda);
@import url(http://fonts.googleapis.com/css?family=Dancing+Script);
@import url(http://fonts.googleapis.com/css?family=Quicksand);
@import url(http://fonts.googleapis.com/css?family=Exo);
@import url(http://fonts.googleapis.com/css?family=Varela+Round);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Caption);
@import url(http://fonts.googleapis.com/css?family=Crimson+Text);
@import url(http://fonts.googleapis.com/css?family=Crete+Round);
@import url(http://fonts.googleapis.com/css?family=Questrial);
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
@import url(http://fonts.googleapis.com/css?family=Fira+Sans);
@import url(http://fonts.googleapis.com/css?family=Ropa+Sans);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Armata);
@import url(http://fonts.googleapis.com/css?family=Patua+One);
@import url(http://fonts.googleapis.com/css?family=News+Cycle);
@import url(http://fonts.googleapis.com/css?family=Pontano+Sans);
@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@import url(http://fonts.googleapis.com/css?family=Gudea);
@import url(http://fonts.googleapis.com/css?family=Josephin+Slab);
@import url(http://fonts.googleapis.com/css?family=Noticia+Text);
@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed);
@import url(http://fonts.googleapis.com/css?family=Jura);
@import url(http://fonts.googleapis.com/css?family=Sanchez);
@import url(http://fonts.googleapis.com/css?family=Lobster+Two);
@import url(http://fonts.googleapis.com/css?family=Benchnine);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
@import url(http://fonts.googleapis.com/css?family=Old+Standard+TT);
@import url(http://fonts.googleapis.com/css?family=Courgette);
@import url(http://fonts.googleapis.com/css?family=Ruda);
@import url(http://fonts.googleapis.com/css?family=Playball);
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
@import url(http://fonts.googleapis.com/css?family=Righteous);
@import url(http://fonts.googleapis.com/css?family=Kreon);
@import url(http://fonts.googleapis.com/css?family=Passion+One);
body {
background: #bbb;
}
input {
margin: 0 0 20px 0;
font-family: mono;
font-size: 16px;
padding: 5px;
border: 1px solid black;
}
select {
display: block;
margin: 0 0 20px 0;
font-size: 16px;
padding: 5px;
border: 1px solid black;
background: white;
font-family: mono;
}
textarea {
border: 1px solid black;
padding: 5px;
font-family: mono;
font-size: 16px;
resize: none;
}
h1 {
font-size: 42px;
}
p {
font-size: 18px;
Margin: 0;
}
.inputs {
float: left;
padding: 10px;
}
.inputs>p {
width: 200px;
}
.sampleText {
background: white;
float: left;
width: 600px;
height: 500px;
border: 1px solid black;
}
.sampleText>h1, .sampleText>p {
padding: 0 20px;
}<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script>
</head>
<body ng-controller="FontTester">
<h1></h1>
<div class="inputs">
<div class="header">
<p>Select Header Font:</p>
<select ng-model="headerFont">
<option ng-repeat="font in fonts" value="{{font}}">{{font}}</option>
</select>
<p>Set Header Text:</p>
<input type="text" ng-model="header">
</div>
<div class="bodytext">
<p>Select Body Font:</p>
<select ng-model="bodyFont">
<option ng-repeat="font in fonts" value="{{font}}">{{font}}</option>
</select>
<p>Set Body Text:</p>
<textarea rows="8" cols="19" ng-model="bodytext"></textarea>
</div>
</div>
<div class="sampleText" style="background:{{bgcolor}};">
<h1 style="font-family: '{{headerFont}}';">{{header}}</h1>
<p style="font-family: '{{bodyFont}}';">{{bodytext}}</p>
</div>
</body>
</html>我尝试包装的{{font}}，这是在ng重复的选项，但没有工作。由于我对数据绑定的知识非常有限，我真的想不出任何其他方法来实现它，这让我很困扰。有人知道为什么没成功吗，我该怎么做才能成功吗?
使用ng-style (https://docs.angularjs.org/api/ng/directive/ngStyle)应该可以工作
<select ng-model="bodyFont">
<option ng-repeat="font in fonts" value="{{font}}" ng-style="{'font-family':font}>{{font}}</option>
</select>
相关文章：
- 正在寻找一个非常简单的例子UpdateListItems与Sharepoint2007的SPservices
- 使用一个非常简单的日期选择器时遇到问题
- 为什么AngularJS在页面加载时没有自动绑定属性?包括一个非常简单的例子
- backbone.js抛出无效对象初始值设定项错误，这是一个非常简单的错误
- 如何制作一个非常基本的所见即所得
- 将 [$injector:modulerr] 放在一个非常简单的页面上;想不通为什么
- jQuery在一个非常大的字符串中提取一个json子字符串
- 如何设置一个非常快速的节点.js UDP服务器
- 一个非常简单的警报和确认框样式与 css
- 如何将平滑过渡添加到一个非常简单的javascript幻灯片中
- 如何从图像数组创建一个非常简单的jquery幻灯片
- 需要从erb生成一个非常特定的html来让javascript工作
- 用JS创建一个非常简单的游戏
- 一个非常奇怪的阵列
- 如何创建一个非常基本的'插件'
- 如何使用JS创建一个非常基本的IA
- 如何创建一个非常简单的在线混音器
- 我应该如何在PHP页面上实现一个非常简单的一对一聊天?彗星
- 使用mongoose保存一个非常大的CSV到mongoDB
- Node.js切片一个非常大的缓冲区耗尽内存
