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

Question

我有一个自动填充表格填充部分，但当我点击链接“手动输入”我希望它被替换为空的表单域（在相同的空间/ 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> 

Answer 1

下面是一个小提琴证明你在找什么：http://jsfiddle.net/a0w7z4up/1/

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