AngularJS 学习笔记（1）

MVC

View(视图), 即 HTML。

Model(模型), 当前视图中可用的数据。--》scope

Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。

1.directive 函数创建自定义指令。

使用驼峰法来命名一个指令runoobDirective, 但在使用它时需要以-分割, runoob-directive。可以通过以下方式来调用指令：元素名、属性、类名。通过添加restrict属性限制调用，restrict值可以是以下几种:E只限元素名使用，A只限属性使用，C只限类名使用，M只限注释使用，restrict默认值为EA, 即可以通过元素名和属性名来调用指令。

2.表单&css

ng-model指令根据表单域的状态添加/移除以下类：ng-empty、ng-not-emptyng-touched、ng-untouched、ng-valid、ng-invalid、ng-dirty、ng-pending、ng-pristine、

ng-model指令基于它们的状态为 HTML 元素提供了 CSS 类

required>

.ng-invalid {background-color: lightblue;}

编辑文本域，不同状态背景颜色会发送变化。文本域添加了 required 属性，该值是必须的，如果为空则是不合法的。

3.作用域scope&根作用域rootScope?????????????

在大型项目中，HTML DOM中可能会有多个作用域。

4.过滤器

通过一个管道字符（|）和一个过滤器添加到表达式，如{{lastname | uppercase}}

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

filter          从数组项中选择一个子集 x in names|filter:test|orderby:'country'

lowercase  格式化字符串为小写

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

uppercase  格式化字符串为大写

ps:输入过滤器可以通过一个管道字符（|）和一个过滤器添加到指令中，该过滤器后跟一个冒号和一个模型名称。

5.服务（a function or object）

$location     返回当前URL地址

$http           和服务器交互，发送请求

$timeout      对应window.setTimeout

$interval      对应window.setInterval

自定义服务    创建-》调用

创建app.service('hexafy', function(){ this.a = function(x){} });

调用app.controller('myCtrl', funtion($scope,hexafy){$scope.hex = hexafy.a(x); });

more-》在过滤器中使用自定义服务

6.选择框Select

-通过ng-option指令创建(better for 使用ng-options的选项的一个对象，ng-repeat是一个字符串)

<select ng-model="selectedName" ng-options="x.first for x in names">

可能的用法：x/x.name for (x,y) in names

-通过ng-repeat

<select><option ng-repeat="x in names">{{x}}</option></select>

7.表格

$index,$even&odd

<table>

    <tr ng-repeat="x in names | orderBy : 'Country'">

        <td>$index+1</td>

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

        <td>{{x.age}}</td>

    </tr>

</table>

table tr:nth-child(odd){background-color:#f1f1f1;}