码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS学习笔记

时间:2015-09-20 13:21:39      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:

参考: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学习笔记

标签:

原文地址:http://my.oschina.net/u/2351685/blog/508690

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!