Question

基本上我在一个页面中有两个Div，其中一次只能看到一个。我有一个文本输入放在我的第一个div中，显示我的默认值。现在，如果隐藏第一个div并显示第二个DIV，我想将文本输入DOM交换到第二个DIV。在交换时需要记录textinput的ID和它所具有的值。我有一个在我的自定义指令中交换的文本输入的引用（在下面的代码片段中为ref-comp）。我怎样才能在angularJS中实现这一目标？请帮帮我。

<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>

Answer 1

请看一下这可能有帮助。

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-show交换div和范围变量来访问DOM的输入字段。假设如果使用范围变量让我们说divAVarialbe和divBVariable。然后为div使用divAVarialbe，即所有的儿童模型都将进入divAVarialbe，所以你的数据str将是

divAVarialbe = {“text1”：“textfild的值”，“otherModel”：“”，...}

Div B也是如此。

通过这种方式，您可以区分DOM。它取决于你对Object的了解程度。假设它像mvc模式那么它将很容易编码。

可能会有所帮助。

在Angular JS中交换DOM

1 个答案: