示例：

<!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. 前端学习资源（js）

    JavaScript JavaScript | MDN JavaScript 秘密花园 JavaScript 标准参考教程(alpha) 给 JavaScript 初心者的 ES2015 实战 Col ...

  2. jsb游戏闪退 ScriptingScore::executeFunctionWithOwner 出错

    Assertion failure: thing, at...gc/Marking.cpp:112 遇到个jsb的bug,全公司的人整整折腾了2天!! 描述: 下面代码,在GC后,程序崩溃,错误log ...

  3. 如何写 github wiki

    在你库里面的文件夹下 点击wiki进入编辑页面 如何编辑: header以#开始, #代表一级header, ##代表二级header... 段落直接以空行分隔. 每行后面加两个以上的空格 分条列举的 ...

  4. dalvik虚拟内存管理之三——调试信息

    转载自http://www.miui.com/thread-75063-1-1.html 1. verbosegc一般Java虚拟机要求支持verbosegc选项,输出详细的垃圾收集调试信息.dalv ...

  5. C++ Primer ：第十章 ：泛型算法之再探迭代器以及其他算法

    除了为每个容器定义的迭代器之外,标准库在头文件<iterator>还定义了额外集中迭代器, 包括: 插入迭代器,这些迭代器被绑定到一个容器上,可以向容器插入元素. 流迭代器,    这些迭 ...

  6. Web端文件打包.zip下载

    使用ant.jar包的API进行文件夹打包.直接上代码: String zipfilename = "test.zip"; File zipfile = new File(zipf ...

  7. Blob 构造函数

    Blob 构造函数使 Web 开发人员可直接在客户端上创建或操作 Blob(经常等效于一个文件). 该构造函数在 W3C 的文件 API 规范中进行定义,该规范目前尚处于工作草案阶段.在较早版本的文件 ...

  8. JavaWeb学习记录（十九）——开发JSTL自定义标签

    一.防盗链标签 import javax.servlet.http.HttpServletResponse;import javax.servlet.jsp.JspException;import j ...

  9. phpwind将服务器数据同步到本地之后网站不显示或者排版错误

    在将phpwind的数据同步到本地服务器之后 如果访问本地服务器的首页不能显示的话 首先要查看global.php文件中的D_P变量,官方默认 的此变量应该指向和R_P变量是同一个文件夹即网站的根目录 ...

  10. [原创]cocos2d-x研习录-第一阶 背景介绍 之 cocos2d家族史

    Cocos2D是一个2D开源游戏引擎,它最早是由Ricardo Quesada(阿根廷人,社区简称Riq)和他的朋友们用Python开发的,用于开发2D游戏和基于2D图形的任何应用.最早引擎的名字源自 ...