示例：

  1. <!DOCTYPE html>
  2. <html ng-app="MyApp">
  3. <head>
  4.     <title>Study 5</title>
  5.     <script type="text/javascript" src="js/angular.js"></script>
  6. </head>
  7. <body>
  8.     <div ng-controller="testController">
  9.         <h1>{{model.newTitle}}</h1>
  10.         Name:<input type="text" ng-model="model.name" />
  11.         Fraction:<input type="text" ng-model="model.fraction" />
  12.         Type:<select ng-model="model.type"><option value="1" selected>Radio</option><option value="2">CheckBox</option></select>
  13.         <input type="button" ng-click="add(model.fraction)" value="Add" />
  14.         <ul>
  15.             <li ng-repeat="item in model.options">
  16.                 <b>{{$index+1}}</b>
  17.                 <input type="text" ng-model="item.content" value="item.content" />
  18.                 <a href="javascript:void(0)" ng-click="del($index)">Delete</a>
  19.             </li>
  20.         </ul>
  21.         <hr />
  22.         <div>
  23.             <h1>{{model.previewTitle}}</h1>
  24.             <b>[{{model.type | typeFilter}}]{{model.name}}</b>({{model.fraction}})
  25.             <ul>
  26.                 <li ng-repeat="item in model.options">
  27.                     <b>{{$index + 1}}</b>
  28.                     <input type="radio" name="optcheck" ng-show="model.type==1" />
  29.                     <input type="checkbox" ng-show="model.type==2" />
  30.                     {{item.content}}
  31.                 </li>
  32.             </ul>
  33.         </div>
  34.         <hr />
  35.         {{nowTime | date : "yyyy-MM-dd HH:mm:ss"}}
  36.     </div>
  37.     <script type="text/javascript">
  38.         var app = angular.module("MyApp", [], function() { });
  39.         var myModel = {
  40.             newTitle: "Title",
  41.             previewTitle: "Preview Title",
  42.             name: "Robin",
  43.             fraction: "100",
  44.             type : 1,
  45.             options: []
  46.         };
  47.         app.controller("testController", function($scope) {
  48.             $scope.model = myModel;
  49.             $scope.add = function(text) {
  50.                 var obj = { content: text };
  51.                 $scope.model.options.push(obj);
  52.             };
  53.             $scope.del = function(index) {
  54.                 $scope.model.options.splice(index, 1);
  55.             };
  56.             $scope.nowTime = new Date();
  57.         });
  58.         app.filter("typeFilter", function() {
  59.             var func = function(value) {
  60.                 return value == 1 ? "Single Select" : "Multi Select";
  61.             };
  62.             return func;
  63.         });
  64.     </script>
  65. </body>
  66. </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. u32 mac以及arp匹配

    # Examples that match MAC (a big "thank you" to Julian Anastasov for this!): M0 through M5 ...

  2. 服务调用方案(Spring Http Invoker) - 我们到底能走多远系列(40)

    我们到底能走多远系列(40) 扯淡:  判断是否加可以效力于这家公司,一个很好的判断是,接触下这公司工作几年的员工,了解下生活工作状态,这就是你几年后的状态,如果满意就可以考虑加入了. 主题: 场景: ...

  3. Linux常用命令整理 - imsoft.cnblogs

    su 用户名 在不退出登陆的情况下,切换到另外一个人的身份如果用户名缺省,则切换到root状态会提示输入密码,密码不回显的. 在用su命令切换root用户时,使用“-”选项,这样可以将root的环境变 ...

  4. archlinux下查看机器的ip地址

    问题原因 默认archlinux没有安装ifconfig这个在其它发行版中常用的命令,刚开始不知道怎么查看机器的ip. 解决方案 使用archlinux中已经安装的ip命令.在后面跟上addr, ro ...

  5. left join测试验证之一

    $ sqlite3 a.dbSQLite version 3.8.1 2013-10-17 12:57:35Enter ".help" for instructionsEnter ...

  6. 小三角图标如何用CSS写

    上三角▲     1 width: 0; 2 height: 0; 3 line-height: 0; 4 font-size: 0; 5 border-width: 10px; 6 border-s ...

  7. 哪些函数不能为virtual函数

    1> 内联函数 内联函数是在编译时期展开,而虚函数的特性是运行时才动态联编,所以两者矛盾,不能定义内联函数为虚函数. 2> 构造函数 构造函数用来创建一个新的对象,而虚函数的运行是建立在对 ...

  8. 利用jdbc连接oracle数据库

    JDBC是Sun公司制定的一个可以用Java语言连接数据库的技术. 一.JDBC基础知识 JDBC(Java Data Base Connectivity,java 数据库连接)是一种用于执行SQL语 ...

  9. leetcode 101 Symmetric Tree ----- java

    Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). For e ...

  10. Apache模块管理

    Apache是一个模块化设计的服务,核心只包含主要功能,扩展功能通过模块实现,不同模块可以被静态的编辑进程序,也可以动态加载. # /usr/local/apache/bin/httpd -M  查看 ...