zoukankan      html  css  js  c++  java
  • 一次五分钟 angularJS (1)—— Binding

    引用angularjs

    需要使用AngularJS,需要引用AngularJS的文件

    ng-app

    要将angular用到页面绑定的时候,我们需要指明它的作用域。

    在上图中,ng-app="" 表示我们现在演示的angular的作用域在该<div>标签之内。当然我们也可以将ng-app=""写在<body>标签上。写在哪个标签,我们的angular语法就支持在哪。

    接下来,我们看看效果

    可以看出,<div>中的{{2+2}}就被解析成4了,而<div>外的{{2+2}}则原样输出。

    表达式

    在angular语法中,{{}}中的内容即为表达式,可以作一般javascript语法处理。

    Binding

    我们在页面上添加一个<input>,希望<input>输入什么,{{}}表达式就显示什么。

    看看效果

    可以看到文本框中输入什么,“Hello”后面就会显示文本框中的内容,这就是angular中的binding

    其中ng-model的值,相当于定义了一个变量,该变量名为name。如果该变量不存在则创建它。该变量的值绑定在当前的<input>标签的value属性值上。

    {{name}}则表示读取ng-model对应的变量name的值,即<input>的value。

    示例

    在html页面上添加2个css样式,分别是显示红色和绿色。

    将<span>的class属性与文本框的值进行绑定,现在我们在文本框中输入red,green后看看效果

    原创博客,未经允许,请勿转载。

  • 相关阅读:
    访问者模式-Visitor Pattern
    jsp页面包含的几中方式
    Java Excel API的使用
    Java中导入、导出Excel
    【Oracle】OVER(PARTITION BY)函数用法
    myeclipse编辑jsp页面卡死
    myeclipse 最佳设置
    echarts学习总结
    java中 json和bean list map之间的互相转换总结
    泛型设计<T, PK extends Serializable>
  • 原文地址:https://www.cnblogs.com/woshiywyw/p/5782455.html
Copyright © 2011-2022 走看看