示例：

<!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. html 和 body详解

    1.背景色 当不设置html的时候,html的属性不生效,浏览器会捕获body的颜色作为浏览器背景颜色,如果html生效了,则会捕获html的颜色作为浏览器背景颜色. [例1:不设置 html] bo ...

  2. C语言Makefile文件使用

    C语言中代码Makefile文件的写法 单文件,例: #定义变量 CFLAGS=gcc #具体命令都需要一个入口,all: 这个就相当于入口,默认情况,执行第一次入口, #后面执行其他入口进行依赖,如 ...

  3. 用rem来做响应式开发

    强烈推荐这篇文章:<web app 变革之rem> px转rem工具:<px转rem工具> 由于最近在做公司移动项目的重构,因为要实现响应式的开发,所以大量使用到了rem的单位 ...

  4. Windows RPC Demo实现

    Windows RPC Demo实现 本文参考并整理以下相关文章 1. <远程过程调用> -百度百科 2. <RPC 编程> -http://www.ibm.com/devel ...

  5. Think Python - Chapter 17 - Classes and methods

    17.1 Object-oriented featuresPython is an object-oriented programming language, which means that it ...

  6. 读metronic文档学到的几个知识点

    1.RTL  同样的页面,它做了两套.为什么,因为在这个世界上,有些民族,有些语种,是从右向左来的. 2. google material design 同样的一套东西,又分别做了google mat ...

  7. 设置drawable图片

    google官方建议在textView和imageView挨着的时候,建议使用drawable来显示图片 第一个方法:setCompoundDrawablesWithIntrinsicBounds(D ...

  8. [转载] C++ typedef 用法详解

    typedef的语法描述 在现实生活中,信息的概念可能是长度,数量和面积等.在C语言中,信息被抽象为int.float和 double等基本数据类型.从基本数据类型名称上,不能够看出其所代表的物理属性 ...

  9. Java-->分割文件

    --> 通过IO 流将一个文件分割成多份 package com.dragon.java.splitfile; import java.io.File; import java.io.FileI ...

  10. 设置SAPgui自动退出功能

    当客户端长时间没有使用时,为了不占用SAP服务器的资源,我们可以设置当客户端在一段时间没有 进行操作时自动退出SAP系统. 设置步骤如下: 用Tcode rz10打开参数配置窗口,选择你当前的实例参数 ...