Angularjs 实现动态添加控件功能

实现下面这样的需求：

点击增加一块数据盘，会出现数据盘选项。

(1)最开始，想到原生JavaScript，jQuery (appendChild()等方法结合AngularJS来添加新的元素。但是突然发现控件里面的数据绑定，原生javascript没法控制。

(2)上网查资料，找到$compile服务，动态改变html内容。本以为这可以解决我的需求，但是仔细研究发现$compile是这样的东西。

用$compile服务创建一个directive ‘compile'，这个complie会将传入的html字符串或者DOM转换为一个template，然后直接在html里调用compile即可

(3)$compile不能满足我的需求，继续找资料，才发现angularjs实现这样的需求，如此简洁明朗。即ng-repeat  $index.

<div ng-repeat="item in DATA.data">
    <div class="form-group">
    <div class="col-md-12">
      <label class="col-md-1" >{{$index + 1}}</label>
      <div class="col-md-9"><input type="text" class="form-control" ng-model="item.value" name="item{{$index + 1}}" /></div>
      <div><input type="button" ng-click="item.delete($index)" value="删除"></div>
    </div>
    </div>
</div
<div><input type="button" ng-click="add()" value="增加"></div> 
testModule.controller('testController',
   function ($scope, $log) {
     $scope.DATA = new Object();
     $scope.DATA.data = [{key: 0, value: ""}];
    // add
     $scope.add = function($index) {
       // 用时间戳作为每个item的key
       $scope.DATA.data.splice($index + 1, 0,{key: new Date().getTime(), value: ""});
     }
     // delete
     $scope.DATA.delete = function($index) {
      $scope.DATA.data.splice($index, 1);
    }
});

以上所述是小编给大家介绍的Angularjs 实现动态添加控件功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Angularjs 动态添加指令并绑定事件的方法

    这两天学习了angularjs 感觉指令这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="&

  • AngularJS实现动态添加Option的方法

    AngularJS实现动态添加Option的方法

    本文实例讲述了AngularJS实现动态添加Option的方法.分享给大家供大家参考,具体如下: 项目中后台管理设置,前台下拉动态添加option <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&q

  • Angularjs 实现动态添加控件功能

    Angularjs 实现动态添加控件功能

    实现下面这样的需求: 点击增加一块数据盘,会出现数据盘选项. (1)最开始,想到原生JavaScript,jQuery (appendChild()等方法结合AngularJS来添加新的元素.但是突然发现控件里面的数据绑定,原生javascript没法控制. (2)上网查资料,找到$compile服务,动态改变html内容.本以为这可以解决我的需求,但是仔细研究发现$compile是这样的东西. 用$compile服务创建一个directive 'compile',这个complie会将传入的h

  • ASP.NET动态添加控件一例

    第一次单击页面中有3个Label,第二次单击有6个,第三次单击有9个,也就是每次单击要在上次的状态下再添加3个. 我的方法是,可以通过Session来保存上次的状态,一种解法如下: Test.aspx关键代码: 复制代码 代码如下: <form id="form1" runat="server"> <asp:DropDownList ID="DropDownList1" runat="server">

  • 基于Jquery的动态添加控件并取值的实现代码

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Jquery动态控件</title> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script ty

  • 动态向页面添加控件和使用正则表达式的代码

    复制代码 代码如下: namespace WebCode { public partial class _default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String str = "这是一个测试文件<{config name=\"pagetitle1\"}>,一个标签的解析<{config name=\"pagetitle2\

  • 学习使用AngularJS文件上传控件

    学习使用AngularJS文件上传控件

    前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东

  • OpenLayers3实现图层控件功能

    本文实例为大家分享了OpenLayers3实现图层控件的具体代码,供大家参考,具体内容如下 1. 前言 在实际应用中,我们将加载到地图容器中的图层通过图层显示的控件功能,来显示加载的图层,便于用户查看与操作,OpenLayers 3 中并没有提供类似的图层控件,但是他的 API 却提供了该功能的相关接口,我们可以通过调用相关的接口,实现该功能. 2. 实现思路 (1)新建一个网页,参考前面的文章加载OSM瓦片图层的方法,加载OSM瓦片.MapQuest 影像.JSON 与KML 格式的矢量图.

  • iOS表视图之下拉刷新控件功能的实现方法

    iOS表视图之下拉刷新控件功能的实现方法

    下拉刷新是重新刷新表视图或列表,以便重新加载数据,这种模式广泛用于移动平台,相信大家对于此也是非常熟悉的,那么iOS是如何做到的下拉刷新呢? 在iOS 6之后,UITableViewControl添加了一个refreshControl属性,该属性保持了UIRefreshControl的一个对象指针.UIRefreshControl就是表视图实现下拉刷新提供的类,目前该类只能用于表视图界面.下面我们就来试试该控件的使用. 编写代码之前的操作类似于前面几篇文章.代码如下: #import "View

  • 比例尺、缩略图、平移缩放之百度地图添加控件方法

    比例尺、缩略图、平移缩放之百度地图添加控件方法

    下面通过图文并茂的方式给大家详细介绍下比例尺.缩略图.平移缩放之百度地图添加控件方法. 地图控件概述 百度地图上负责与地图交互的UI元素称为控件.百度地图API中提供了丰富的控件,您还可以通过Control类来实现自定义控件. 地图API中提供的控件有: Control:控件的抽象基类,所有控件均继承此类的方法.属性.通过此类您可实现自定义控件. NavigationControl:地图平移缩放控件,PC端默认位于地图左上方,它包含控制地图的平移和缩放的功能.移动端提供缩放控件,默认位于地图右下

  • 用javascript添加控件自定义属性解析

    前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加:如有一文本框: 复制代码 代码如下: <input type="text" id="txtInput" name="txtInput" value="自定义文本"> 如想增加idvalue属性(值为"自定义值"),可以在javascript中这样写: 复制代码 代码如下: var t

  • MFC中动态创建控件以及事件响应实现方法

    本文实例讲述了MFC中动态创建控件以及事件响应实现方法,分享给大家供大家参考.具体实现方法如下: 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个容器,一般是对话框,这时我们在对话框编辑窗口中,从工具窗口中拖出所需控件放在对话框中即可,再适当修改控件ID,设置控件属性,一个静态控件就创建好了,当对话框被显示时,其上的控件也会显示. 静态控件不需要调用Create()

随机推荐