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

  • 相关阅读:
    vim编辑器入门
    线程概念
    forkJoin
    join()方法跟踪
    mybatis 注解和xml 优缺点
    sql 索引 sql_safe_updates
    spirngcloud文件
    springCloud com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Connection refused: connect
    创建线程池的四种方式
    ThreadLocal
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/9407998.html
Copyright © 2011-2022 走看看