最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿。

              一、AngularJS 表达式

            AngularJS表达式写在双大括号内:{{expression}},把数据绑定到HTML,其实和与ng-bind是一样的实现,在表达式书写的位置"输出"数据,既可以直接写表达式,而在页面呈现时间就是直接输出的表达式的结果。AngularJS 表达式很像JavaScript表达式:它们可以包含文字、运算符和变量。

             (1)、AngularJS与javascript的对比

              <1>、AngularJS数字与javascript的对比

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

             AngularJS的表达式、指令的学习(2)

                      <2>、AngularJS字符串javascript的对比

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

              AngularJS的表达式、指令的学习(2)

              <3>、AngularJS对象与javascript的对比

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

              AngularJS的表达式、指令的学习(2)

              <4>、AngularJS数组与javascript的对比

               AngularJS的表达式、指令的学习(2)

               在浏览器中呈现的结果如下:

                AngularJS的表达式、指令的学习(2)

              (2)、使用ng-init实现以上实例的相同

               <1>、AngularJS数字使用ng-init来把表达式的值绑定在html中

               AngularJS的表达式、指令的学习(2)

               在浏览器中呈现的结果如下:

               AngularJS的表达式、指令的学习(2)

                       <2>、AngularJS字符串使用ng-init来把表达式的值绑定在html中

                       AngularJS的表达式、指令的学习(2)

                       在浏览器中呈现的结果如下:

                       AngularJS的表达式、指令的学习(2)

                       <3>、AngularJS对象使用ng-init来把表达式的值绑定在html中

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

              AngularJS的表达式、指令的学习(2)

              <4>、AngularJS数组使用ng-init来把表达式的值绑定在html中

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

              AngularJS的表达式、指令的学习(2)

              综上所述,我们可以看到类似于JavaScript 表达式,AngularJS表达式可以包含字母,操作符以及变量,与JavaScript 表达式不同,AngularJS表达式可以写在HTML中,但是AngularJS不支持条件判断,循环及异常。更不同的是AngularJS表达式支持过滤器。

              二、AngularJS指令

            AngularJS 通过被称为“指令”的新属性来扩展 HTML,前面就介绍过AngularJS指令是扩展的HTML属性,带有前缀ng-;ng-app指令初始化一个AngularJS应用程序;ng- init指令初始化应用程序数据;而ng-model指令把元素值(比如输入域的值)绑定到应用程序。

                     (1)、ng-model指令把元素值(比如输入域的值)绑定到应用程序。

              AngularJS的表达式、指令的学习(2)

              在浏览器中呈现的结果如下:

              AngularJS的表达式、指令的学习(2)

              ng-app指令告诉 AngularJS,<div> 元素是AngularJS应用程序的"所有者".

             (2)、数据绑定

              上 面实例中的{{firstName}}表达式是一个AngularJS数据绑定表达式,AngularJS中的数据绑定,同步了AngularJS表达式 与AngularJS数据,{{firstName}}是通过ng-model="firstName"进行同步,如下实例中,两个文本域是通过两个 ng-model指令同步的:

               AngularJS的表达式、指令的学习(2)

               在浏览器中呈现的结果如下:

               AngularJS的表达式、指令的学习(2)

               (3)、重复Html元素

               AngularJS的表达式、指令的学习(2)

               在浏览器中呈现的结果如下:

               AngularJS的表达式、指令的学习(2)

               或者ng-repeat指令用在一个对象数组上:

               AngularJS的表达式、指令的学习(2)

               在浏览器中呈现的结果如下:

               AngularJS的表达式、指令的学习(2)

               由上面的几个小实例我们就总结一下吧简单:

               ng-app指令定义了AngularJS应用程序的根元素,在网页加载完毕时会自动引导(自动初始化)应用程序。

               ng-init指令为AngularJS应用程序定义了初始值。通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。

               ng-model指令绑定HTML元素到应用程序数据。ng-model指令也可以为应用程序数据提供类型验证(number、email、 required),或者为应用程序数据提供状态(invalid、dirty、touched、error),也可以为HTML元素提供CSS类以及绑 定HTML元素到HTML表单。

               ng-repeat指令对于集合中(数组中)的每个项会克隆一次HTML元素。

               今天就写到这里啦,嘿嘿,明天继续的啦。我只是从基础学起的哦,嘿嘿,加油加油!

相关文章:

  • 2021-12-26
  • 2021-07-23
  • 2021-07-13
  • 2022-12-23
  • 2021-06-10
  • 2021-09-08
  • 2021-06-09
猜你喜欢
  • 2022-01-13
  • 2022-12-23
  • 2022-12-23
  • 2022-01-26
  • 2021-08-26
  • 2021-04-27
  • 2021-06-01
相关资源
相似解决方案