Html 如何使用angular js在同一个div中动态显示和隐藏不同的内容？

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

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

**自动填充部分：**
产品1
产品2
**手册部分：**
产品3
产品4
产品5

这是一把小提琴，展示了你在寻找什么：

---

使用

ng show

、

ng init

和

ng click

组合来呈现输入字段的替换

我为您编写了一些示例代码。请仔细检查一下这个

   <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 = {};
            }
        }