您的位置：首页 > Web前端 > AngularJS

AngularJS学习笔记

2015-09-20 00:00 633 查看

参考：http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents

参考：http://www.ituring.com.cn/article/13474

1）载入AngularJS脚本

<script src="http://cdn.bootcss.com/angular.js/1.4.5/angular.min.js"></script>

2）ng-app，告诉AngularJS处理整个HTML页并引导应用

<html ng-app>

3）使用变量

Hello {{'World'}}!

4）ng-model，实现双向绑定

<input type="text" ng-model="yourname" placeholder="World">

5）是否显示 ng-show

ng-show={{product.images.length}}

6）遍历 ng-repeat

<div class="product row" ng-repeat="product in store.products">

索引$index

<tr ng-repeat="item in items">
<td>{{$index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
</tr>

7）Using filters

格式化（时间，大小写uppercase，货币currency，限制limitTo:3）

排序(|orderBy:"-price")

8）引用图片ng-src

<img ng-src="{{image}}" />

9）一个model可以有多个controller

var app=angular.module("store",[]);
app.controller("storeController",function(){
this.products = [];
});
app.controller("tabController",function(){
this.tab = 1;
});

10）ng-class，添加一个class

<li ng-class="{ active: tab.isSet(1)}">

11）选择标签页

ng-click="tab.setTab(1)"
ng-show="tab.isSet(1)"

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： AngularJS

相关文章推荐

新的分享

章节导航