AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model
巫煌
AngularJS的绑定：
ng-bind可用于绑定变量, {{ 表达式}} 内放置变量时，作用与ng-bind相同。如下例：
<!doctype html>
<html>
<head>
<script
src="bower_components/angular/angular.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController" >
<h2>欢迎来到 <span style="font-family: Arial, Helvetica, sans-serif;">HBR </span><span style="font-family: Arial, Helvetica, sans-serif;">{{helloTo.title}} 的世界!</h2></span>
</div>
<p>输入您的名字: <input type="text" ng-model="name"></p>
<p>Hello <span ng-bind="name"></span>!</p>
<script>
angular.module("myapp", [])
.controller("HelloController", function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = "AngularJS";
});
</script>
</body>
</html>实际上，ng-bind与下列HTML代码的效果相同
<p>Enter your Name: <input type="text" ng-model="name"></p>
<p>Hello {{name}}!</p>但是，{{ }}还可以用于求表达式的值，比如{{ 5+5}}，HTML页面会显示结果10。
ng-app —— 启动angular应用
ng-init —— 初始化应用数据变量
ng-model —— 定义模型
ng-repeat —— 重复HTML元素，与循环类似
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Angular JS的四个Directives</title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body>
<h1>样例</h1>
<div ng-app="" ng-init="fruits=[{name:'苹果', location:'北方'},
{name:'橘子',location:'南方'},
{name:'桃子', location:'全国'}]">
<p>水果产地列表:</p>
<ol>
<li ng-repeat="fruit in fruits">
{{ '水果: ' + fruit.name + ', 产地: ' + fruit.location }}
</li>
</ol>
</div>
</body>
</html>
类似资料：