我们没学一门语言或者框架，几乎里面都有各自的语法和内置函数，当然，强悍的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. Spring框架，如何返回数据给视图(jsp文件)

    第一步 准备返回给视图的数据 package com.cwebs.samples; import java.util.LinkedHashMap; import java.util.List; imp ...

  2. ArcGIS API for Silverlight中加载Google地形图（瓦片图）

    原文:ArcGIS API for Silverlight中加载Google地形图(瓦片图) 在做水利.气象.土地等行业中,若能使用到Google的地形图那是再合适不过了,下面就介绍如何在ArcGIS ...

  3. (leetcode)Add Digits

    Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...

  4. iOS 增加UIButton按钮的可点击区域

    在很多时候,按钮可能看起来那么大,但是在它周围进行点击时,都能够触发事件,是因为它的可点击区域比我们看到的button要大. 在使用AutoLayout的时候,我们处理的是按钮的image属性,所以这 ...

  5. apache 根据端口访问配置

    1. http.conf 中 需要加上 listen 8080  然后 开启   Include conf/extra/httpd-vhosts.conf http.conf 是项目的主配置文件 ,引 ...

  6. dede完美分页样式

    html <div class="dede_pages">              <ul class="pagelist">     ...

  7. Nested transactions in stored procedure of SQLServer

    question: if the nested transaction encountered an exception, then rollbacked. How about the outer t ...

  8. 微信公众平台开发(98) UnionID

    关键字 微信公众平台 微信开放平台 UnionID作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/weixin98-get-user-UnionID.html ...

  9. axis2 WebService的发布与调用

    1:准备:    JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk6downloads-1902814.html    e ...

  10. 项目重新部署后报The attribute required is undefined for the annotation type XmlElementRef

    在另外一台机器上部署项目,项目导进Eclipse中发现有异常 public class BooleanFeatureType extends FeatureBaseType{ @XmlElementR ...