在Angular JS中交換DOM

基本上我在一個頁面中有兩個Div，一次只能看到一個。我有一個文本輸入放在我的第一個div裏面，顯示了我的默認值。現在，如果第一個div被隱藏並顯示第二個DIV，我想將文本輸入DOM切換到第二個DIV。 textinput的ID和它具有的值需要在交換時重新設置。我有我的自定義指令（ref-comp在下面的代碼片段）中交換文本輸入的參考。我如何在angularJS中實現這一點？請在這裏幫助我。在Angular JS中交換DOM

<div id="1"> 
    <div id ="container1"> 
     <input type="text" id="text1"> 
     </input> 
    </div> 
    <div id ="container1"> 
     <ref-comp id="ref1" refId ="text1"> 
     </ref-comp> 
    </div> 
</div>

來源

2016-02-10 LNarine

你只想交換值嗎？或HTML。 –

我想將Div 1中的輸入文本DOM切換到Div 2，並且只要顯示相應的DIV就可以以其他方式切換。 – LNarine

請看看這可能是幫助。

var app = angular.module('myApp', []); 
 

 
app.controller('IndexCtrl', function($scope) { 
 
$scope.showme = true; 
 
    
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div id="1" data-ng-app="myApp" data-ng-controller="IndexCtrl"> 
 

 
    <div id ="container1" ng-show="showme"> 
 
     value of text filed of div 1: {{divAVarialbe.text1}} <br> 
 
     <input type="text" id="text1" ng-model="divAVarialbe.text1"> 
 
     </input> 
 
    </div> 
 
    <div id ="container1" ng-show="!showme"> 
 
     value of text filed of div 2 : {{divBVarialbe.text1}} <br> 
 
     <input type="text" id="text1" ng-model="divBVarialbe.text1"> 
 
     <ref-comp id="ref1" refId ="text1"> 
 
     </ref-comp> 
 
    </div> 
 
<button ng-click="showme = !showme" ng-show="!showme">Show div 1</button> 
 
<button ng-click="showme = !showme" ng-show="showme">Show div 2</button> 
 
</div>

可以使用NG-節目交換div和和範圍變量來訪問提交的DOM的輸入。假設如果使用範圍變量讓我們說divAVarialbe和divBVariable。然後爲div divAVarialbe將被使用，即所有的孩子模型將進入divAVarialbe內，因此您的數據str將爲

divAVarialbe = {「text1」：「value of textfild」，「otherModel」：「」,. ..}

與Div B相同。

以這種方式您可以區分DOM。它基於你有多少知識的對象。假設它像mvc模式那麼它將很容易編碼。

可能會有所幫助。

來源

2016-02-10 05:51:44 Rahul

我很喜歡用AngularJS的DIV隱藏顯示邏輯，但是在本例中顯示DIV 2時，我需要交換最初放置在DIV1中的輸入文本。 – LNarine

看到編輯的代碼，這可能會幫助你 – Rahul

在Angular JS中交換DOM

回答

相關問題