示例：

<!DOCTYPE html>

<html ng-app="MyApp">

<head>

    <title>Study 5</title>

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

</head>

<body>

    <div ng-controller="testController">

        <h1>{{model.newTitle}}</h1>

        Name:<input type="text" ng-model="model.name" />

        Fraction:<input type="text" ng-model="model.fraction" />

        Type:<select ng-model="model.type"><option value="1" selected>Radio</option><option value="2">CheckBox</option></select>

        <input type="button" ng-click="add(model.fraction)" value="Add" />

        <ul>

            <li ng-repeat="item in model.options">

                <b>{{$index+1}}</b>

                <input type="text" ng-model="item.content" value="item.content" />

                <a href="javascript:void(0)" ng-click="del($index)">Delete</a>

            </li>

        </ul>

        <hr />

        <div>

            <h1>{{model.previewTitle}}</h1>

            <b>[{{model.type | typeFilter}}]{{model.name}}</b>({{model.fraction}})

            <ul>

                <li ng-repeat="item in model.options">

                    <b>{{$index + 1}}</b>

                    <input type="radio" name="optcheck" ng-show="model.type==1" />

                    <input type="checkbox" ng-show="model.type==2" />

                    {{item.content}}

                </li>

            </ul>

        </div>

        <hr />

        {{nowTime | date : "yyyy-MM-dd HH:mm:ss"}}

    </div>

    <script type="text/javascript">

        var app = angular.module("MyApp", [], function() { });

        var myModel = {

            newTitle: "Title",

            previewTitle: "Preview Title",

            name: "Robin",

            fraction: "100",

            type : 1,

            options: []

        };

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

            $scope.model = myModel;

            $scope.add = function(text) {

                var obj = { content: text };

                $scope.model.options.push(obj);

            };

            $scope.del = function(index) {

                $scope.model.options.splice(index, 1);

            };

            $scope.nowTime = new Date();

        });

        app.filter("typeFilter", function() {

            var func = function(value) {

                return value == 1 ? "Single Select" : "Multi Select";

            };

            return func;

        });

    </script>

</body>

</html>

Angular学习（5）- 数组双向梆定+filter的更多相关文章

  1. Angular学习（6）- 数组双向梆定+filter+directive

    示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 6< ...

  2. Angular学习（4）- 数组双向梆定

    示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 4< ...

  3. Angular学习（3）- 双向梆定

    示例代码: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 3& ...

  4. 【JS学习】数组过滤方法的使用filter

    前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...

  5. Angular 学习笔记——ng-repeat&filter

    <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <met ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. Angular学习资料大全和常用语法汇总（让后端程序员轻松上手）

    前言: 首先为什么要写这样的一篇文章呢?主要是因为前段时间写过一些关于Angualr的相关实战文章,有些爱学习的小伙伴对这方面比较感兴趣,但是又不知道该怎么入手(因为认识我的大多数小伙伴都是后端的同学 ...

  8. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  9. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

随机推荐

  1. 深度理解Key-Value Observing 键值观察

    前言   在上一阶段的开发过程中,我们大量使用了 KVO 机制,来确保页面信息的及时同步.也因此碰到了很多问题,促使我们去进一步学习 KVO 的相关机制,再到寻找更好的解决方案.鉴于 KVO 让人欲仙 ...

  2. 四、CCSprite

    在介绍CCSprite之前,先要理解游戏开发中的一个核心概念:精灵.精灵也称为游戏对象,它可以用来表示游戏中的任何物体,比如敌人.子弹.甚至是一个背景图片.一段文字.CCSprite可以说是在coco ...

  3. Apache搭建多个站点方法详解

    www.111cn.net 编辑:Bolshevik 来源:转载 Apache的虚拟主机是一种允许在同一台机器上配置多个不同站点的web服务器环境的,就是iis一样可以创建多站点了,但是apache需 ...

  4. Java-->类的成员

    一.方法重载 在同一个类中,方法名相同.形参列表不同的两个多个方法之间构成重载!overload 调用方法的时候,是根据你传递的实参,来决定到底调用的是重载的哪个方法!!! 注意: 1.判断形参列表是 ...

  5. shell 脚本实战笔记(1)--source/fork/exec的区别

    在linux shell编程中, 随着脚本处理规模的变大, 会嵌套调用子进程. 但父进程以不同的方式调用子进程, 其结果和背后的机制不尽相同.这边就简单描述下source/fork/exec调用子进程 ...

  6. poj 2955 括号匹配 区间dp

    Brackets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6033   Accepted: 3220 Descript ...

  7. safari穿越到chrome

    tell application "Safari" set theURL to URL of front document set the clipboard to theURL ...

  8. Android EditText内容监听

    监听 EditText的内容变化,作出对应的处理. MainActivity.class package com.example.edittextdemo; import android.app.Ac ...

  9. Jquery基础知识；

    1.jquery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(select ...

  10. UVa 1586 Molar mass --- 水题

    UVa 1586 题目大意:给出一种物质的分子式(不带括号),求分子量.本题中分子式只包含4种原子,分别为C.H.O.N, 原子量分别为12.01,1.008,16.00,14.01 解题思路:先实现 ...