Angularjs 实现动态添加控件功能

 更新时间:2017年05月25日 16:30:41   作者:Tinatrista  
这篇文章主要介绍了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 实现动态添加控件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • AngularJS使用指令增强标准表单元素功能

    AngularJS使用指令增强标准表单元素功能

    这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能,包括数据绑定、建立模型属性、验证表单等,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • AngularJS 实现JavaScript 动画效果详解

    AngularJS 实现JavaScript 动画效果详解

    本文主要介绍AngularJS 实现 JavaScript 动画的资料,这里整理了详细的资料和简单示例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • Angular.js实现动态加载组件详解

    Angular.js实现动态加载组件详解

    这篇文章主要给大家介绍了关于Angular.js实现动态加载组件的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-05-05
  • angularjs学习笔记之双向数据绑定

    angularjs学习笔记之双向数据绑定

    AngularJS在$scope变量中使用脏值检查来实现了数据双向绑定。和Ember.js数据双向绑定中动态设施setter和getter不同,脏治检查允许AngularJS监视那些存在或者不存在的变量。
    2015-09-09
  • Angular6 写一个简单的Select组件示例

    Angular6 写一个简单的Select组件示例

    这篇文章主要介绍了Angular6写一个简单的Select组件示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Angular X中使用ngrx的方法详解(附源码)

    Angular X中使用ngrx的方法详解(附源码)

    ngrx是一套利用RxJS的类库,下面这篇文章主要给大家介绍了关于Angular X中使用ngrx的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-07-07
  • angular实现图片懒加载实例代码

    angular实现图片懒加载实例代码

    本篇文章主要介绍了angular实现图片懒加载实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • AngularJS中过滤器的使用与自定义实例代码

    AngularJS中过滤器的使用与自定义实例代码

    这篇文章运用实例代码给大家介绍了angularjs中过滤器的使用和自定义过滤器,对大家学习AngularJS具有一定的参考借鉴价值,感兴趣的朋友们可以参考借鉴。
    2016-09-09
  • 详解AngularJS中的依赖注入机制

    详解AngularJS中的依赖注入机制

    这篇文章主要介绍了详解AngularJS中的依赖注入机制,对JavaScript各组件的使用起到非常重要的作用,需要的朋友可以参考下
    2015-06-06
  • AngularJS 最常用的功能汇总

    AngularJS 最常用的功能汇总

    angularjs功能在项目开发中经常会用到,本文给大家总结了八种angularjs最常用的功能,感兴趣的朋友一起学习吧
    2016-02-02

最新评论