AngularJS学习（二）——表达式，ng-bind,ng-app,ng-init,ng-repeat,ng-model

来源：互联网发布：免费点播软件编辑：程序博客网时间：2024/04/30 08:16

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。

下面，我们来学习下AngularJS的几个Directives:

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>

0 0