文档章节

【AngularJS学习笔记】02 小杂烩及学习总结

前端老手
 前端老手
发布于 10/21 23:57
字数 586
阅读 22
收藏 0

本文转载于:专业的前端网站【AngularJS学习笔记】02 小杂烩及学习总结

表格示例

<div ng-app="myApp" ng-controller="customersCtrl"> 
<table>
  <tr ng-repeat="x in names | orderBy : 'Country'">
    <td>{{ $index + 1 }}</td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
        {{ x.Name|uppercase  }}
    </td>
    <td ng-if="$even">
        {{ x.Name }}
    </td>
    <td ng-if="$odd" style="background-color:#f1f1f1">
        {{ x.Country|uppercase}}
    </td> 
    <td ng-if="$even"> 
        {{ x.Country }}
    </td> 
  </tr> 
</table> 
</div>

ng-disabled,ng-show,ng-hide 指令

<div ng-app="" ng-init="mySwitch=true">
  <p>
    <button ng-disabled="mySwitch">ng-disabled</button>
    <button ng-show="mySwitch">ng-show</button>
    <button ng-hide="mySwitch">ng-hide</button>
  </p>
  <p>
    <input type="checkbox" ng-model="mySwitch"/>按钮
  </p>
  <p>
    {{ mySwitch }}
  </p>
</div>

ng-click事件

  <div ng-app="myApp" ng-controller="personCtrl">
        <button ng-click="toggle()">隐藏/显示</button>
        <p ng-show="myVar">
            ng-show的情况: {{name}}
        </p>
        <p ng-hide="myVar">
            ng-hide的情况: {{name}}
        </p>
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('personCtrl', function($scope) {
            $scope.name="Troy123";
            $scope.myVar = true;
            $scope.toggle = function() {
                $scope.myVar = !$scope.myVar;
            };
        });
    </script>

AngularJS的一些通用API

使用ng-include包含HTML

<body>
<div class="container">
  <div ng-include="'myUsers_List.htm'"></div>
  <div ng-include="'myUsers_Form.htm'"></div>
</div>
</body>

AngularJS 使用动画需要引入 angular-animate.min.js 库。

还需要在Angular应用程序中使用<body ng-app="ngAnimate">

如果已经有ng-app的名字了,那么就加上这行代码

var app = angular.module('myApp', ['ngAnimate']);

在模块定义中 [] 参数用于定义模块的依赖关系。

var app = angular.module("myApp", []);

括号[]表示该模块没有依赖,如果有依赖的话会在中括号写上依赖的模块名字。

<style>
div {
  transition: all linear 0.5s;
  background-color: lightblue;
  height: 100px;
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-200px;
  left: 200px;
}

</style>
</head>
<body ng-app="myApp">
<h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

  • ng-show
  • ng-hide
  • ng-class
  • ng-view
  • ng-include
  • ng-repeat
  • ng-if
  • ng-switch

 

因为目的也只是入门而已,短期内也不会应用起来,所以写了这些就直接结束了 。

虽然觉得很突兀,但是确实没什么内容好写的。

花费的时间为3天,毕竟快速入门,很有趣的一个库。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=h0iihk1abbaa

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
《AngularJS学习整理》系列分享专栏

《AngularJS学习整理》系列分享专栏 《AngularJS学习整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201748.html 文章 教你用AngularJS框架一行JS代码实现...

开元中国2015
2018/11/09
196
0
15个学习 AngularJS 最好的网站

AngularJS 是一款优秀的前端JS开发框架,在你开发应用的时候可以帮你快速提示自己的能力并简化代码。掌握 AngularJS 可以帮你提示你的应用的可用性、实现其他一些在科技界认为不可能的功能。...

Specs
09/29
0
0
2017-03-01

学习内容:angular.js module模板定于服务provide 多个控制器数据共享 过滤器及练习 完成内容:学习内容及笔记详细 工作问题:关于angular.js之前在做签到抽奖项目的时候遇到 获取数值及方式...

Full_Session
2017/03/01
2
1
[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen
2018/05/21
0
0
2017-03-04

学习内容:angular.js 自定义指令compile和link属性 完成内容:学习内容及笔记详细 磐石农商行商家管理端需求分析文档 工作问题:学习angular.js编译阶段 pre:指令链接到子元素之前运行 post...

Full_Session
2017/03/04
2
0

没有更多内容

加载失败,请刷新页面

加载更多

JS前端MD5加密

Bootstrap官网获得md5 js地址:https://www.bootcdn.cn/blueimp-md5/ <!--MD5加密--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script> 使用方法: md5(pwd)......

被毒打的程序猿_先瑞
19分钟前
4
0
BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
今天
5
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
20
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
4
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部