发表于: 2017-05-12 23:42:53

1 878


一、今天完成的事情

学习angular

1.AngularJS 表达式

AngularJS 表达式写在双大括号内:{{ expression }}

AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙。

AngularJS 将在表达式书写的位置"输出"数据。

AngularJS 表达式 很像 JavaScript 表达式:它们可以包含文字、运算符和变量。

2.AngularJS 指令

AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-

ng-app 指令初始化一个 AngularJS 应用程序。

ng-init 指令初始化应用程序数据。

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

3. AngularJS Scope(作用域)

Scope(作用域) 是应用在 HTML (视图) JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

4. AngularJS 过滤器

AngularJS 过滤器可用于转换数据:

过滤器   描述

currency 格式化数字为货币格式。

filter 从数组项中选择一个子集。

lowercase    格式化字符串为小写。

orderBy 根据某个表达式排列数组。

uppercase    格式化字符串为大写。

5. AngularJS Http

6. AngularJS 表格

表格数据本质上通常是重复的。ng-repeat指令,可以用来方便地绘制表格。下面的示例说明使用ng-repeat指令来绘制表格。

<table>

  <tr>

   <th>Name</th>

   <th>Marks</th>

  </tr>

  <tr ng-repeat="subject in student.subjects">

   <td>{{ subject.name }}</td>

   <td>{{ subject.marks }}</td>

  </tr>

</table>

表格可以使用CSS样式设置样式,如下:

<style>

table, th , td {

  border: 1px solid grey;

  border-collapse: collapse;

  padding: 5px;

}

table tr:nth-child(odd) {

  background-color: #f2f2f2;

}

table tr:nth-child(even) {

  background-color: #ffffff;

}

</style>

二、明天计划的事情

继续学习Angular,写任务6

三、遇到的问题

感觉接触新的语言或者框架都比较慢,从开始的bootstrap,到less,以及js,还有如今的Angular,囧!还是好好看吧

四、收获

学习了angular一些基础知识。



返回列表 返回列表
评论

    分享到