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. 牛客网数据库SQL实战(21-25)

    21.查找所有员工自入职以来的薪水涨幅情况,给出员工编号emp_no以及其对应的薪水涨幅growth,并按照growth进行升序CREATE TABLE `employees` (`emp_no` i ...

  2. sftp服务器的安装与远程

    本文所描述环境只在window系统下 一.搭建sftp服务器 1.首先需要下载一个软件freeSSHd,下载地址http://www.freesshd.com/?ctt=download,下载第一个f ...

  3. topcoder srm 712 div1

    problem1 link 将$a_{0},a_{1},...,a_{n-1}$看做$a_{0}x^{0}+a_{1}x^{1}+...+a_{n-1}x^{n-1}$.那么第一种操作相当于乘以$1+ ...

  4. topcoder srm 710 div1 -23

    1.给定两个长度都为$n$的数组$A,B$,给出一个操作序列将$A$变成$B$.每个操作可以是以下两种之一:(1)选择一个$i,0\leq i <n$且$A_{i} \neq 0$,令$t=A_ ...

  5. Python3 tkinter基础 Canvas create_rectangle 画虚边的矩形 create_oval 画椭圆形 圆形

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  6. linux基础之网络基础配置

    基础命令:ifconfig/route/netstat,ip/ss,nmcli 一.ifconfig/route/netstat相关命令 1.  ifconfig - configure a netw ...

  7. bzoj1565: [NOI2009]植物大战僵尸 最大权闭合子图，tarjan

    bzoj1565: [NOI2009]植物大战僵尸 链接 https://www.lydsy.com/JudgeOnline/problem.php?id=1565 思路 很容易的想到最大权闭合子图 ...

  8. SpringBoot 通过token进行身份验证，存储redis

    代码: public interface TokenManager { /** * 创建token * @param userInfo * @return */ String getToken(Use ...

  9. 题解——洛谷P2781 传教（线段树）

    可以说是数据结构学傻了的典型案例了 昨天跳到这题上 然后思考了一下 噫!好!线段树裸题 然后打完板子,发现\(  n \le 10^9 \) 显然线段树直接做不太行 然后这题又只有普及的难度 然后我就 ...

  10. 【Hadoop 分布式部署 七： 使用ntp配置内网中集群机器时间同步 】

    集群的时间要同步,如果时间不同步,会出现很多问题. 找一台机器做时间服务器 所有的机器与这台机器的时间进行定时的同步 比如,每日十分钟同步一次 我们这里使用  hadoop-senior.zuoyan ...