示例：

<!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. 机器学习技法-AdaBoost元算法

    课程地址:https://class.coursera.org/ntumltwo-002/lecture 重要!重要!重要~ 一.Adaptive Boosting 的动机 通过组合多个弱分类器(hy ...

  2. 合并两个有序数组a和b到c

    问题:两个有序数组a和b,合并成一个有序数组c. // 合并两个有序数组a和b到c void Merge_Array(int a[], int n, int b[], int m, int c[]) ...

  3. MySql配置方法，批处理进行MySql配置

    @echo 注意右击管理员运行 @pause @echo .添加环境变量 @echo .my.ini中添加如下配置 @echo [mysqld] @echo basedir=C:\Program Fi ...

  4. hdu 5203

    题目大意: 有n根连续的木棒,其中有m根是坏的,现在要求将木棒切成连续的四段,使得其中三段中都不包含坏的木棒,且三段木棒的长度和最大,在最长的前提下看这三段木棒能否拼成三角形,如果能的话,问最多有多少 ...

  5. 检测到在集成的托管管道模式下不适用的 ASP.NET 设置的解决方法

    在将应用程序从经典模式迁移到集成模式时,可以保留经典模式下的自定义模块和处理程序注册,也可以将这些注册移除.如果不移除经典模式下使用的 httpModules 和 httpHandlers 注册,则必 ...

  6. C++ Vector 用法总结

    1, 头文件#include <vector> using namespace std; 2,定义与初始化 一般结合模板来使用 vector <Elem>           ...

  7. URAL 1930 Ivan's Car（BFS）

    Ivan's Car Time limit: 1.5 secondMemory limit: 64 MB The world is in danger! Awful earthquakes are d ...

  8. 黑马程序员——JAVA基础之泛型和通配符

    ------- android培训.java培训.期待与您交流! ---------- 泛型:            JDK1.5版本以后出现新特性.用于解决安全问题,是一个类型安全机制. 泛型好处: ...

  9. CSS中控制换行的四种属性

    一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果,点此查看示例. Example Source Code 语法: white-space : normal  ...

  10. 掌握 Ajax，第 1 部分: Ajax 入门简介

    转:http://www.ibm.com/developerworks/cn/xml/wa-ajaxintro1.html 掌握 Ajax,第 1 部分: Ajax 入门简介 理解 Ajax 及其工作 ...