欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能

 更新時(shí)間：2017年05月25日 16:30:41   作者：Tinatrista  
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

實(shí)現(xiàn)下面這樣的需求：

點(diǎn)擊增加一塊數(shù)據(jù)盤(pán)，會(huì)出現(xiàn)數(shù)據(jù)盤(pán)選項(xiàng)。

(1)最開(kāi)始，想到原生JavaScript，jQuery (appendChild()等方法結(jié)合AngularJS來(lái)添加新的元素。但是突然發(fā)現(xiàn)控件里面的數(shù)據(jù)綁定，原生javascript沒(méi)法控制。

(2)上網(wǎng)查資料，找到$compile服務(wù)，動(dòng)態(tài)改變html內(nèi)容。本以為這可以解決我的需求，但是仔細(xì)研究發(fā)現(xiàn)$compile是這樣的東西。

用$compile服務(wù)創(chuàng)建一個(gè)directive ‘compile'，這個(gè)complie會(huì)將傳入的html字符串或者DOM轉(zhuǎn)換為一個(gè)template，然后直接在html里調(diào)用compile即可


(3)$compile不能滿(mǎn)足我的需求，繼續(xù)找資料，才發(fā)現(xiàn)angularjs實(shí)現(xiàn)這樣的需求，如此簡(jiǎn)潔明朗。即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) {         
       // 用時(shí)間戳作為每個(gè)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 實(shí)現(xiàn)動(dòng)態(tài)添加控件功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論