zoukankan      html  css  js  c++  java
  • AngularJS参数绑定 --AngularJS

    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

  • 相关阅读:
    CocoaPods的基本使用方法
    【STM32】电能表抄表功能实现|自学笔记
    【STM32】串口收发驱动Drv_Uart|学习笔记
    【STM32】SYSCLK配置|学习笔记
    【stm32】的PWM外设|学习笔记
    【JavaScript】setAttribute在添加事件时失效解决办法
    三步建立自己域名的主页,Github Pages功能简明手册
    Java生成UUID 与 MySQL数据库如何生成uuid数据
    利用Excel办公软件快速拼接SQL
    Java实现几种常见排序方法
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/9407998.html
Copyright © 2011-2022 走看看