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. bzoj 4540 [HNOI 2016] 序列 - 莫队算法 - Sparse-Table - 单调栈

    题目传送门 传送点I 传送点II 题目大意 给定一个长度为$n$的序列.询问区间$[l, r]$的所有不同的子序列的最小值的和. 这里的子序列是连续的.两个子序列不同当且仅当它们的左端点或右端点不同. ...

  2. bzoj 3875 骑士游戏 - spfa - 动态规划

    Description  [故事背景] 长期的宅男生活中,JYY又挖掘出了一款RPG游戏.在这个游戏中JYY会 扮演一个英勇的骑士,用他手中的长剑去杀死入侵村庄的怪兽. [问题描述] 在这个游戏中,J ...

  3. Codeforces 868C Qualification Rounds - 位运算

    Snark and Philip are preparing the problemset for the upcoming pre-qualification round for semi-quar ...

  4. tr 命令用法

     tr a. 替换全部字符 [root@bogon scripts]# tr [a-z] [A-Z]  < /etc/fstab    将读出的结果全部替换成大写字母  (取一行作为展示效果) ...

  5. Win7 配置免安装mysql5.7.20过程详解

    转载:https://www.2cto.com/database/201406/312689.html 转载:http://blog.csdn.net/hekaihaw/article/details ...

  6. python ---24 正则表达式 re模块

    一.正则表达式 1.字符组 ① [abc] 匹配a或b或c ②  [a-z] 匹配a到z之间的所有字⺟ [0-9]匹配所有阿拉伯数字 2.元字符 3.量词 4.重要搭配 ①  .*? ②  .*?x  ...

  7. Unity3D学习笔记（三十七）：顶点偏移和溶解

    顶点偏移 沿向量方向偏移,沿自身坐标系方向偏移 沿法线方向偏移,球体放大,立方体拆分 Shader "Lesson/VFVertOffsetVertex" { Properties ...

  8. Redis架构设计

    高可用Redis服务架构分析与搭建 各种web开发业务中最为常用的key-value数据库了 应用: 在业务中用其存储用户登陆态(Session存储),加速一些热数据的查询(相比较mysql而言,速度 ...

  9. Couldn't import dot_parser, loading of dot files will not be possible. 解决方法

    参考: pydot and graphviz error: Couldn't import dot_parser, loading of dot files will not be possible ...

  10. ISE14.7兼容性问题集锦https://www.cnblogs.com/ninghechuan/p/7241371.html

    ISE14.7兼容性问题集锦 对于电子工程师来说,很多电路设计仿真软件都是特别大的,安装下来一般都是上G,甚至几十G,而且win7的兼容性也是最好的,不愿意升级win10是因为麻烦,而且没有必要,对于 ...