AngularJS参数绑定有三种方式。第一种插值表达式“｛｛｝｝”表示，第二种在标签中使用ng-bind属性表示，第三种针对input框(标签)的ng-module属性表示。针对三种参数绑定方式，设定了以下三个小案例。

1、插值表达式

案例核心代码：

demo01.html:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS数据绑定-插值表达式</title>
</head>
<body>
<div ng-controller="demo01Controller">
    <span>{{name}}</span>
    <span>{{num1+num2}}</span>
    <span>{{num1*num2}}</span>
    <span>{{obg.address}}</span>
    <span>{{address[0]}}</span>
    <ul>
        <li ng-repeat="item in address track by $index">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in university">
            {{item.name}}
            <ul>
                <li ng-repeat="childItem in item.xueyuan">{{childItem}}</li>
            </ul>
        </li>
    </ul>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo01Controller.js"></script>
</body>
</html>

案例效果：

2、ng-bind

案例核心代码：

demo02.html:

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS数据绑定-ng-bind表示</title>
</head>
<body>
<div ng-controller="demo02Controller">
    <span ng-bind="name"></span>
    <span ng-bind="num1+num2"></span>
    <span ng-bind="num1*num2"></span>
    <span ng-bind="obg.address"></span>
    <span ng-bind="adress[0]"></span>
    <ul>
        <li ng-repeat="item in address track by $index" ng-bind="item"></li>
    </ul>
    <ul>
        <li ng-repeat="item in university">
            {{item.name}}<!--这里用插值表达式,考虑为什么？-->
            <ul>
                <li ng-repeat="childItem in item.xueyuan" ng-bind="childItem"></li>
            </ul>
        </li>
    </ul>
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo02Controller.js"></script>
</body>
</html>

案例效果：（同1）

3、ng-module

案例核心代码：

demo03.html：

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>AnjularJS数据绑定-ng-module(针对input框)表示</title>
</head>
<body>
<div ng-controller="demo03Controller">
    <input type="text" ng-model="name">
    <!--双向绑定-->
    <p>{{name}}</p><!--或者是<p ng-bind="name"></p>-->
</div>
<script src="../js/angular.min.js"></script>
<script src="../js/app_module.js"></script>
<script src="../js/demo03Controller.js"></script>
</body>
</html>

案例效果：

案例全部代码下载：AngularJS参数绑定.zip

AngularJS参数绑定 --AngularJS的更多相关文章

  1. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  2. AngularJs(Part 9)--AngularJS 表单

    AngularJS 表单     AngularJS使用了MVX的结构,我们可以是传统的表单更加强大.比如过去我们得自己写一大堆验证,比过过去我们得自己转换用户的输入, 现在这些工作全部可以交给Ang ...

  3. 【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

    [js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀 ...

  4. Spring MVC初始化参数绑定

    初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法  使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型   proper ...

  5. SpringMVC初始化参数绑定--日期格式

    一.初始化参数绑定[一种日期格式] 配置步骤: ①:在applicationcontext.xml中只需要配置一个包扫描器即可 <!-- 包扫描器 --> <context:comp ...

  6. SpringMvc中初始化参数绑定

    初始化参数绑定与类型转换很类似,初始化绑定时,主要是参数类型 ---单日期 在处理器类中配置绑定方法  使用@InitBinder注解 在这里首先注册一个用户编辑器 参数一为目标类型   proper ...

  7. @RequestParam @RequestBody @PathVariable 等参数绑定注解详解

    文章主要讲解request 数据到handler method 参数数据的绑定所用到的注解和什么情形下使用. 简介: handler method 参数绑定常用的注解,我们根据他们处理的Request ...

  8. spring 参数绑定

    部分资料来源: @RequestParam @RequestBody @PathVariable 等参数绑定注解详解 spring学习之@ModelAttribute运用详解 Spring MVC @ ...

  9. springmvc的初始化参数绑定

    一.springmvc的初始化参数绑定 此种和我们之前说的类型转换非常相似,可以看作是一种类型转换 在初始化参数绑定时  重要的是参数类型 -------------------单日期的绑定 二. 配 ...

随机推荐

  1. 一、数据库表中字段的增删改查,二、路由基础.三、有名无名分组.四、多app共存的路由分配.五、多app共存时模板冲突问题.六、创建app流程.七、路由分发.八、路由别名,九、名称空间.十、反向解析.十一、2.x新特性.十二、自定义转换器

    一.数据库表中字段的增删改查 ''' 直接在modules中对字段进行增删改查 然后在tools下点击Run manage.py Task执行makemigrations和migrate 注意在执行字 ...

  2. Windows Installation

    If you're running on Windows it is good to run Jenkins as a service so it starts up automatically wi ...

  3. topcoder srm 685 div1

    problem1 link 依次枚举每个元素$x$,作为$S$中开始选择的第一个元素.对于当前$S$中任意两个元素$i,j$,若$T[i][j]$不在$S$中,则将其加入$S$,然后继续扩展:若所有的 ...

  4. noip模拟【noname】

    noname [问题描述] 给定一个长度为n的正整数序列,你的任务就是求出至少需要修改序列中的多少个数才能使得该数列成为一个严格(即不允许相等)单调递增的正整数序列,对序列中的任意一个数,你都可以将其 ...

  5. php的缓冲/缓存 js对象 ，php编程的深入思考-1

    proto- 表示前缀, 表示"原始的, 主要的, 原型的, 最初的. 所以 prototype: 是原型的意思. webserver服务器apach, 的角色,就像一个 仓库/仓库保管员而 ...

  6. 转方阵|2012年蓝桥杯B组题解析第五题-fishers

    (6')转方阵 对一个方阵转置,就是把原来的行号变列号,原来的列号变行号 例如,如下的方阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 转置后变为: 1 5 9 1 ...

  7. 【做题】TCSRM591 Div1 500 PyramidSequences——数形结合&思维

    题意:定义高度为\(x\)的金字塔数列为周期为\(2x-2\)的无限数列.它的每一个周期都是形如\(1,2,...,x-1,x,x-1,...,2\)的形式.记高度为\(x\)的金字塔数列第\(i\) ...

  8. js二叉树

    插入数值//初始化node对象function Node ( data) { this.data = data; this.left = null; this.right = null;}// 定义插 ...

  9. Learning to Compare Image Patches via Convolutional Neural Networks --- Reading Summary

    Learning to Compare Image Patches via Convolutional Neural Networks ---  Reading Summary 2017.03.08 ...

  10. Lintcode214-Max of Array-Naive

    Given an array with couple of float numbers. Return the max value of them. Example Example 1: Input: ...