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. [内核驱动] VS2012+WDK 8.0 Minifilter实现指定扩展名文件拒绝访问

    转载:http://blog.csdn.net/C0ldstudy/article/details/51585708 转载:http://blog.csdn.net/zj510/article/det ...

  2. 【python041--构造方法：构造和析造】

    一.魔法方法 1.魔法方法总是被双下划线包围,例如:__init__ 2.为什么在类实例化的时候,有时候需要构造__init__,有时候不需要呢 举例说明: #定义一个矩形的类,需要长和宽两个参数,计 ...

  3. Paper Read: Robust Deep Multi-modal Learning Based on Gated Information Fusion Network

    Robust Deep Multi-modal Learning Based on Gated Information Fusion Network 2018-07-27 14:25:26 Paper ...

  4. [LightOJ 1370] Bi-shoe and Phi-shoe(欧拉函数快速筛法)

    题目链接: https://vjudge.net/problem/LightOJ-1370 题目描述: 给出一些数字,对于每个数字找到一个欧拉函数值大于等于这个数的数,求找到的所有数的最小和. 知识点 ...

  5. 解决：springmvc中接收date数据问题

    这里提供三种解决方案. 一.局部转换 :只是对当前Controller类有效 springMVC.xml中添加: <bean class="org.springframework.we ...

  6. java进程占用系统内存高，排查解决

    转自:http://blog.51cto.com/chengxiaobai/2052530?cid=695076 故障:最近收到生产服务器的报警短信以及邮件,报警内容为:内存使用率高于70%. 使用t ...

  7. JAVA9新特性——JShell使用笔记

    前言:JShell是java 9的新特性之一,由于在之前学校java8的lambda表达式的时候,就希望有这么一个可以交互的界面来快速响应编写的代码.刚好java9出来了,就对它把玩起来了... 内容 ...

  8. ajax 怎么重新加载页面

    $.ajax({ type:"post", url:url, data:{xxx:xx}, dataType: "json", success : functi ...

  9. Spring boot @Scheduled(cron = "* * * * * *") cron表达式详解

    //@Scheduled(cron = "0 0/15 * * * ?") //每15分钟触发一次 //@Scheduled(cron = "5/10 * * * * ? ...

  10. django序列化 serializers

    Django的序列化工具让你可以将Django的模型‘翻译’成其它格式的数据.通常情况下,这种其它格式的数据是基于文本的,并且用于数据交换\传输过程. 一.序列化数据 Django为我们提供了一个强大 ...