@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>过滤器和自定义过滤器</title>

    <script type="text/javascript" src="~/Scripts/angular.js"></script>

</head>

<body>

    <div ng-app="myApp">

        <div ng-controller="firstController">

            <p>在输入框中尝试输入：</p>

            <p>姓名：<input type="text" ng-model="firstName" /></p>

            {{firstName | uppercase}}<br />

            {{lastName}}<br />

            {{price | currency}}<br />

            {{json | json}}  @*JSON格式化的过滤器*@<br />

            {{1304375948024 | date:"yyyy-MM-dd hh:mm:ss"}} @*date 日期过滤器可以给日期格式化**@<br />

            {{123456|number:1}} @*数字过滤器 保留1位小数*@ <br />

            {{250 | currency:'RMB ￥'}}<br />

            {{"i love tank"| limitTo:6}} <br /> @* 截取六个字符串 *@

            {{"i love tank"| limitTo:-6}} <br /> @* 从后向前截取字符串 *@

            <p>

                控制器使用过滤器

                uFirstName:   {{uFirstName}}<br />

                cPrice:     {{cPrice}}<br />

            </p>

        </div>

        <div ng-controller="secondController">

            <p>

                循环对象：

                <ul>

                    <li ng-repeat="x in names | orderBy:'country'：true">

                        @*true表示降序排序*@

                    {{x.name+","+x.country}}

                </li>

            </ul>

        </p>

        <p>

            输入过滤：

        </p>

        <p><input type="text" ng-model="name" /></p>

        <p>

            <ul>

                <li ng-repeat="x in names | filter:name | orderBy:'country'">

                    {{x.name+","+x.country}}

                </li>

            </ul>

        </p>

        <ul>

            <li ng-repeat="p in person">

                姓名：{{p.name}}

                年龄：{{p.age}}

            </li>

        </ul>

    </div>

    {{

        [{"age":20,"id":10,"name":"iphone"},

        {"age":12,"id":11,"name":"sunm xing"},

        {"age":44,"id":12,"name":"test abc"}

        ]| filter:{"name":"iphone"}

    }}

</div>

<script type="text/javascript">

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

    app.controller("firstController", function ($scope, $filter) {

        $scope.firstName = "zhangsan";

        $scope.lastName = "李四";

        $scope.price = "121212";

        $scope.str = "HelloWorld";

        $scope.json = { foo: "bar", baz: 23 };

        $scope.uFirstName = $filter("uppercase")($scope.firstName);

       // $scope.cPrice = $filter("currency")($scope.price);

        $scope.cPrice = $filter("currency")($scope.price,'RMB'); //格式化参数可以写在后面

    });

    app.controller("secondController", function ($scope) {

        $scope.person = [

            { name: "张三", age: "25" },

            { name: "李四", age: "30" },

             { name: "王五", age: "36" }

        ];

        $scope.names = [

            { name: "jani", country: "Norway" },

            { name: "Hege", country: "Sweden" },

            { name: "Kai", country: "Denmark" }

        ];

    });

</script>

</body>

</html>

　　

AngularJs练习Demo7的更多相关文章

  1. angularJS学习笔记二

    angularJS四个特性 1.MVC <!doctype html> <html ng-app> <head> <meta charset="ut ...

  2. AngularJS的简单入门

    AngularJS诞生于2009年,由Misko Hevery等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...

  3. AngularJS+ThinkPHP实例教程

    总体思路 thinkphp通过RESTful方式提供数据给angular,前端(包括模板页面)全部由angular来接管. 示例 实现一个用户管理模块,走通增删改查4个操作,通过该示例,演示如何在th ...

  4. angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】

    事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...

  5. 项目二:品优购 第二天 AngularJS使用 brand商品页面的增删改查

    品优购电商系统开发 第2章 品牌管理 传智播客.黑马程序员 1.前端框架AngularJS入门 1.1 AngularJS简介 AngularJS  诞生于2009年,由Misko Hevery 等人 ...

  6. AngularJS - 入门小Demo

    AngularJS四大特效 MVC模式.模块化设计.自动化双向数据绑定.依赖注入 如果了解了后端开发知识,想必对这些词汇不会陌生,AngularJS融合了后端开发的一些思想,虽然身为前端框架,但与jQ ...

  7. AngularJS入门Demo

    1 :表达式 <html> <head> <title>入门小Demo-1</title> <script src="angular.m ...

  8. 通过AngularJS实现前端与后台的数据对接（二）——服务（service，$http）篇

    什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性. 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化) ...

  9. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

随机推荐

  1. 怎么用C#获取Scenario step在specflow里

    公司最近在用specflow 这种BDD的模式,但PM还是想把case再存进TestManager里面一份儿一遍后期集成TestManager 自动runcase用.所以我们需要获取每个scenari ...

  2. C#高级知识点概要(2) - 线程并发锁

    本文目录: 线程的简单使用 并发和异步的区别 并发控制 - 锁 线程的信号机制 线程池中的线程 案例:支持并发的异步日志组件 线程的简单使用 常见的并发和异步大多是基于线程来实现的,所以本文先讲线程的 ...

  3. 腾讯CMEM的PHP扩展（转载）

    题外话最近公司在做相关的业务,由于Memcached协议缺少返回码,为了保证业务数据的安全性,不得已只好自己写个扩展来实现需求. 基于memcache扩展的2.2.6的稳定版开发而来.代码已经开源,有 ...

  4. kakfa-性能相关

    1.增大partition最大连接数 kafka的集群有多个Broker服务器组成,每个类型的消息被定义为topic,同一topic内部的消息按照一定的key和算法被分区(partition)存储在不 ...

  5. Java并发编程--理解ThreadLocal

    另一篇博文:Hibernet中的ThreadLocal使用 http://www.cnblogs.com/gnivor/p/4440776.html 本文参考:http://blog.csdn.net ...

  6. Android学习之AndroidManifest.xml清单之<uses-feature>

    无意之中看了几个小时的官方英文文档,关于<uses-feature>的介绍.有必要在这里记录一下,应该有很多人不知道<uses-feature>到底是做什么用的,因为我们平时根 ...

  7. QT树莓派交叉编译环开发环境搭建（附多个exe工具下载链接）

    前两天入手了一块2.8’的tft液晶显示屏,于是和树莓派连了一发,成功将命令行显示在了这块小的可怜的屏幕上之后,觉得这屏幕就显示个黑白内容太浪费了,于是考虑开发一个”脸”(图形用户界面,GUI).首先 ...

  8. Qt下使用的静态链接库------ *.lib转化为mingw使用的.a格式的静态库

    使用MinGW附带的工具reimp.exe,该工具一般在MinGW in目录下,其readme文档在MinGWdoc eimp目录下, 方法很简单,比如: C:CodeBlocksMinGWlibdx ...

  9. Android 得到当前已连接的wifi的信号强度

    1.得到当前已连接的wifi信息 WifiManager wifi_service = (WifiManager)getSystemService(WIFI_SERVICE); WifiInfo wi ...

  10. pywin32 安装错误 ImportError: DLL load failed: 不是有效的 Win32 应用程序

    pywin32 安装错误 ImportError: DLL load failed:  不是有效的 Win32 应用程序. 发现是因为没有制定Pywin32的dll所致,我们在用Pywin32开发时, ...