我们没学一门语言或者框架，几乎里面都有各自的语法和内置函数，当然，强悍的angularjs也不例外，他的方法其实常用的没多少，因为很多都可以用源生jis几乎都能完成一大部分。。

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="css/amazeui.min.css">

    <script src="js/jq2.js"></script>

    <script src="js/amazeui.min.js"></script>

    <script src="js/angular.min.js"></script>

    <style>

        .TextBlod { font-weight:bold; }

        .Red { color:red;  }

        .Blue { color:blue; }

        .Bgred{ background:#dd514c; color:green; }

        .Bgblue{ background:#23ccfe; color:green; }

        .Oncss{ background:#000000; color:#ffffff; }

    </style>

</head>

<body ng-app="myapp">

<script type="text/ng-template" id="newlists">

    <ul class="am-avg-sm-8" ng-repeat="c in data | orderBy:'name'" ng-class-odd="Bgred" ng-class-even="Bgblue"

        ng-click="liClick($index)" ng-class="{true:'Oncss'}[$index == index]"

    >

        <li>{{$index}}</li>

        <li>{{c.name}}</li>

        <li ng-class="{true:'Red'}[c.age > 40]">{{c.age}}</li>

        <li>{{c.sex}}</li>

        <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{c.dang ==  "1"? "是":"否"}}</li>

        <li>{{$first ? "是":"否"}}</li>

        <li>{{$last ? "是":"否"}}</li>

        <li ng-class="{true:'Red',false:'Blue'}[c.dang == 1]">{{$middle ? "是":"否"}}</li>

    </ul>

</script>

{{'3.1415926' | number:'2'}} --------number格式化数字

<br />

{{'Hello World' | lowercase}}--------lowercase小写

<br />

{{'Hello World' | uppercase}}--------uppercase大写

<br />

{{'Hello World' | limitTo:'2'}}-------limitTo限制数组长度或者字符串长度

<br />

filter匹配子串,有点像mysql里面的

<br />

{{}}------------data解析时间戳来进行解析成我们看得懂的时间格式  用法：  otime(这里创建出来的时间戳) |  date："yyyy-MM-dd hh:mm:ss"

<br />

json（格式化json对象）

<br />

{{ '33.53'| currency:'￥'}}--------currency货币处理

<ul class="am-avg-sm-8" ng-class="TextBlod" ng-controller="news">

  {{ data | filter:"ali"}}

    <li>序号</li>

    <li>姓名</li>

    <li>年龄</li>

    <li>性别</li>

    <li>党员</li>

    <li>是否是首条</li>

    <li>是否是尾条</li>

    <li>不属于前尾</li>

</ul>

<ul class="am-avg-sm-8" ng-include src="'newlists'" ng-controller="news">

</ul>

</body>

<script>

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

    app.controller('news',function($scope){

        $scope.TextBlod = 'TextBlod';

        $scope.Red = 'Red';

        $scope.Blue = 'Blue';

        $scope.Bgred = 'Bgred';

        $scope.Bgblue = 'Bgblue';

        $scope.Oncss = 'Oncss';

        $scope.data = [

            {name:"baidu",age:"11",sex:"男",dang:"1"},

            {name:"ali",age:"22",sex:"女",dang:"1"},

            {name:"tengxun",age:"33",sex:"男",dang:"0"},

            {name:"wangyi",age:"44",sex:"女",dang:"0"},

            {name:"xinlang",age:"55",sex:"男",dang:"1"},

            {name:"google",age:"66",sex:"男",dang:"0"},

            {name:"weiruan",age:"77",sex:"女",dang:"1"},

            {name:"lieping",age:"33",sex:"男",dang:"0"}

        ];

        $scope.liClick = function(index){

            $scope.index = index;

        }

    });

</script>

</html>

夺命雷公狗—angularjs—10—angularjs里面的内置函数的更多相关文章

  1. 10、SQL Server 内置函数、临时对象、流程控制

    SQL Server 内置函数 日期时间函数 --返回当前系统日期时间 select getdate() as [datetime],sysdatetime() as [datetime2] getd ...

  2. python之路（10）类的内置函数

    目录 isinstance()和issubclass() __setitem__.__getitem__和__delitem__ __str__和__reper__ __format__ __slot ...

  3. 夺命雷公狗—angularjs—6—单条数据的遍历

    我们在实际的工作中常常会处理到一些数据的遍历,这些数据都是后端传到前端的,有些公司会让前端帮忙处理一点遍历的工作,废话不多说,直接上代: <!doctype html> <html ...

  4. 夺命雷公狗-----React---12--添加类和样式

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  5. 夺命雷公狗---微信开发59----在线点播电影网1之ckplayer播放器

    我们节课程就要开始写一个小项目了,这项目主要是写一个在线点播电影影网的,我们用到的播放器是ckplayer ckplayer基本介绍: ckplayer的全称是:超酷flv播放器,他是一款用于网页上播 ...

  6. 夺命雷公狗-----React---11--添加css样式的方法

    <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title></ ...

  7. 夺命雷公狗-----React---10--组建嵌套进行数据遍历

    先写一个组建... 然后进行嵌套.. <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  8. 夺命雷公狗-----React---9--map数据的遍历

    比如我们要实现的是这种效果: 用这种方法来写,她只能写死在哪,没啥意思,所以我们定义一个数据,然后来测试下map方法对她遍历出来的数据 <!DOCTYPE html> <html l ...

  9. 夺命雷公狗-----React---8--react官方提供的组建实现双向绑定

    首先要引入她.. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 【Android测试】【第十节】MonkeyRunner—— 录制回放

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/4861693.html 前言 在实际项目进行过程中,频繁的需 ...

  2. HttpContext为null new HttpContextWrapper(System.Web.HttpContext.Current)

    HttpContext = (context == null ? new HttpContextWrapper(System.Web.HttpContext.Current) : context);

  3. 从输入url到页面加载完成都发生了什么？

    原文地址: http://segmentfault.com/a/1190000003925803 根据 URL 请求页面过程 过程概述 浏览器查找域名对应的 IP 地址: 浏览器根据 IP 地址与服务 ...

  4. ubuntu12.04进入单用户模式

    更改ubuntu配置文件出错了,只能进入单用户模式改回来. 转载至: http://blog.csdn.net/lfyaa/article/details/9899497 1.重启ubuntu,VMw ...

  5. miaov- 自动生成正V反V大于号V小于号V楼梯等图案

    1. 核心:控制 数量的长度-1-i的位置,是放在left上还是top上?是放在前面还是后面! <!DOCTYPE html> <html lang="en"&g ...

  6. 一行两端对齐justify-content

    一.之前不了解css3的属性,更没听过flex布局 在处理表单前面的文字,两端对齐,按照我之前的前端人员,加空格处理,但是在不浏览器解析空格的宽是不一样的 上图就用空格,在不同浏览器显示的效果,有时候 ...

  7. java yum安装的环境变量设置

    如何(怎样)在CentOS 6.X 或 redhat 上使用安装JDK runtime environment (openjdk) ? CentOS 6.X 和 5.X 自带有OpenJDK runt ...

  8. c语言之内存的申请malloc() 和释放free()

    c语言之内存的申请malloc() 和释放free() 1.如何使用 malloc 函数 malloc是一个函数,专门用来从堆上分配内存.使用malloc函数需要几个要求: 内存分配给谁?分配多大内存 ...

  9. MVC项目实践,在三层架构下实现SportsStore-10,连接字符串的加密和解密

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  10. Vue.2.0.5-过渡状态

    过渡状态 Vue 的过渡系统提供了非常多简单的方法设置进入.离开和列表的动效.那么对于数据元素本身的动效呢,比如: 数字和运算 颜色的显示 SVG 节点的位置 元素的大小和其他的属性 所有的原始数字都 ...