示例：

<!DOCTYPE html>

<html ng-app="MyApp">

<head>

    <title>Study 6</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" fraction-num />

        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" fraction-num />

                <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;

        });

        app.directive("fractionNum", function() {

            return {

                link: function(scope, elements, attrs, controller) {

                    elements[0].onkeyup = function() {

                        if (/\D/.test(this.value)) {

                            this.style.borderColor = 'red';

                        }

                        else {

                            this.style.borderColor = '';

                        }

                    };

                }

            };

        });

    </script>

</body>

</html>

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

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

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

  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. angular学习的一些小笔记(中)之directive

    directive里面的几个配置,上代码就清晰了 <!DOCTYPE html> <html ng-app='app'> <head> <meta chars ...

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

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

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

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

  7. 【转】Angular学习总结--很详细的教程

    *这篇文章是转来的,做了自己的一点修改,排版.原始出处不明,如涉及原博主版权问题,请及时告知,我将会立即删除*. 1 前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟 ...

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

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

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

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

随机推荐

  1. "Your local changes to the following files would be overwritten by merge" on git

    运行: git merge --ff origin/master 得到错误信息: error: Your local changes to the following files would be o ...

  2. linux服务器并发与tcmalloc

    前一天使用pmap查看服务器中自己开发的游戏服务的内存使用情况,发现其中数据存储服务的内存占用率非常高,截图如下. 从截图中可以看出来,分配了大量的64MB左右的内存空间,因为对自己的服务比较了解,知 ...

  3. mysql重命名数据表

    命令如下: rename   table oldtablename to newtablename

  4. 《深入浅出Node.js》第1章 Node简介

    @by Ruth92(转载请注明出处) 第1章 Node简介 一.Node的起源 高性能Web服务器的要点:事件驱动.非阻塞I/O. 选择JavaScript的原因:高性能.符合事件驱动.没有历史包袱 ...

  5. 行为识别笔记：HOG,HOF与MBH特征（转载）

    在行为识别的iDT算法中,主要使用了HOG,HOF,MBH和Dense Trajectory四种特征.这里主要对前三者进行介绍. 1. HOG特征(histogram of gray) 此处HOG特征 ...

  6. static讲解

    static表示"全局"或者"静态"的意思,用来修饰成员变量和成员方法,也可以形成静态static代码块,但是Java语言中没有全局变量的概念.  被stati ...

  7. 学习chrome 插件 DHC ,http请求传参方法

    DHC的简介 DHC是一款可以帮助用户使用chrome插件模拟HTTP客户端发送测试数据到服务器的谷歌浏览器插件,在chrome中安装了DHC插件以后,就可在服务器端代码初步完成的时候,使用DHC进行 ...

  8. ✡ leetcode 160. Intersection of Two Linked Lists 求两个链表的起始重复位置 --------- java

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  9. 2016 Hunan Province Programming Contest

    2016 Hunan Province Programming Contest A. 2016 题意 \(1 \le a \le n, 1 \le b \le m\) ,其中\(1 \le n,m \ ...

  10. URAL 1080 Map Coloring（染色）

    Map Coloring Time limit: 1.0 secondMemory limit: 64 MB We consider a geographical map with N countri ...