Question

我有一个自动填写的表单填充部分，但当我点击“手动输入”链接时，我希望将其替换为空表单字段（在同一空格/ spot / div中）。我还希望链接更改为“返回原始”，这样当我点击它时，它允许我返回到原始自动填充状态，并带有链接＆＃34; 输入手动＆＃34; 再次显示。请参阅下面的代码：

**Auto-filled section:**

        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic">Product1</label>
           <div class="col-xs-12 col-sm-6">
              <input type="text" name="product1" class="form-control" id="productName1" value="Product1">
           </div>
        </div>

        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic">Product2</label>
           <div class="col-xs-12 col-sm-6">
              <input type="text" name="product2" class="form-control" id="productName2" value="Product2">
           </div>
        </div>

        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic"></label>
           <div class="col-xs-12 col-sm-6" ><a href="">(or enter details manually)</a></div>
        </div>


**Manual Section:**

  <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic">Product3</label>
           <div class="col-xs-12 col-sm-6">
              <input type="text" name="product3" class="form-control" id="productName3" required="" value="">
           </div>
        </div>

        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic">Product4</label>
           <div class="col-xs-12 col-sm-6">
              <input type="text" name="product4" class="form-control" id="productName4" required="" value="">
           </div>
        </div>
        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic">Product5</label>
           <div class="col-xs-12 col-sm-6">
              <input type="text" name="product5" class="form-control" id="productName5" required="" value="">
           </div>
        </div>

        <div class="form-group">
           <label class="col-xs-12 col-sm-3 control-label" for="selectbasic"></label>
           <div class="col-xs-12 col-sm-6" ><a href="">(or return to original)</a></div>
        </div>

Answer 1

这是一个演示您正在寻找什么的小提琴：memory leak

ng-show，ng-init和ng-click的组合用于呈现输入字段的替换。

Answer 2

我为你做了一些示例代码。请仔细阅读。

   <form >

        <input type="text" ng-model="data.name" />
        <input type="text" ng-model="data.age" />

        <button ng-click="onClick()">{{btnText}}</button>

    </form>

在您的控制器中：

   var data = {
            name: 'mohit',
            age: 26
        }

        $scope.data = data;
        $scope.btnText = 'Change to Manual';

        $scope.onClick = function () {
            if ($scope.btnText == 'Change to Origional') {
                $scope.data = data;
                $scope.btnText = 'Change to Manual';
            } else {
                $scope.btnText = 'Change to Origional';
                $scope.data = {};
            }
        }

如何使用角度js动态显示和隐藏同一div中的不同内容？

2 个答案: