AngularJS学习笔记

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2351685/blog/508690

文章标签：

#javascript #python #ViewUI

本文介绍AngularJS的基础用法，包括如何加载AngularJS脚本、设置ng-app指令、使用ng-model进行双向数据绑定、条件渲染使用ng-show、列表展示ng-repeat等。此外还介绍了AngularJS中的过滤器使用、图片引用方式、多个控制器共存的情况及如何添加和切换样式类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

参考：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)"

转载于:https://my.oschina.net/u/2351685/blog/508690