示例：

<!DOCTYPE html>

<html ng-app="MyApp">

<head>

    <title>Study 4</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" />

        <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.name}}</b>({{model.fraction}})

            <ul>

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

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

                    <input type="radio" name="rdCheck" />

                    {{item.content}}

                </li>

            </ul>

        </div>

    </div>

    <script type="text/javascript">

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

        var myModel = {

            newTitle: "Title",

            previewTitle: "Preview Title",

            name: "Robin",

            fraction: "100",

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

            };

        });

    </script>

</body>

</html>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  9. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

随机推荐

  1. D - Charm Bracelet 背包问题

      Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status Pra ...

  2. jellyfish K-mer analysis and genome size estimate

    http://www.cbcb.umd.edu/software/jellyfish/   http://www.genome.umd.edu/jellyfish.html https://githu ...

  3. R 学习1

    首先安装吧 http://cran.rstudio.com/bin/windows/base/R-3.2.1-win.exe 里面既有32位又有64. R有很多包,如果有的包本地没有,来这里搜 htt ...

  4. 给linux添加一个回收站

    http://blog.chinaunix.net/uid-26805356-id-3492419.html 都知道linux没有回收站,如果一不小心 rm -rf之后,很难恢复,所以就编写了一个回收 ...

  5. 260. Single Number III

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  6. ASP.NET Web API与Rest web api（一）

    本文档内容大部分来源于:http://www.cnblogs.com/madyina/p/3381256.html HTTP is not just for serving up web pages. ...

  7. 转：db2 backup 及 restore

    db2 backup 及 restore 2011-06-21 18:12:20|  分类: AIX |举报 |字号 订阅     两个问题: db2=>list applications db ...

  8. 颜色追踪块CamShift---33

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 颜色追踪块CamShift滤波器. 首先确保你的kinect驱动或者uvc相机驱动能正常启动:(如果你使 ...

  9. C#部分---类、异常保护；

    一:需要初始化的:随机数类.时间值类 随机数类:初始化 实例化//不允许将初始化的语句放置在循环中//Random ran = new Random(); 时间值类:/初始化 实例化//DateTim ...

  10. 课堂所讲整理：HTML--5JavaScript简介

    一.JavaScript简介 1.JavaScript是个什么东西? 它是个脚本语言,需要有宿主文件,它的宿主文件是HTML文件. 2.它与Java什么关系? 没有什么直接的联系,Java是Sun公司 ...