javascript - 如何在更改按钮单击时更改表单？

Question

我有两个 json 文件“a.json”和“b.json”。当用户单击每个不同的按钮时，我需要显示不同的表单。我的问题是，当我单击第一个按钮时，它显示第一个表单，但是当我单击第二个按钮时，它不显示第二个表单。我需要一次显示一个表单，即当我单击第二个按钮时，它会删除第一个表单并显示第二个表单。

  $scope.getFromAFile= function () {
      // body...
      var inputs=[];
      $http.get('a.json').success (function(data){
        var a=changeData(data);
         $scope.formFields=[]

              console.log('pp');

      console.log(data.studentName);
      console.log($scope);
      $scope.formFields = a['input'];


    }).error(function(err){
            alert(err);
        });

    }

        $scope.getFromBFile= function () {

      // body...
      $http.get('b.json').success (function(data){
        var a=changeData(data);
              console.log('pp');
 $scope.formFields=[]
      console.log(data.studentName);
      console.log($scope);
      $scope.formFields = a['input'];
    }).error(function(err){
            alert(err);
        });

    }

这是笨蛋 http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview

Answer 1

Dont mix JQuery with AngularJs

你可以使用 ng-click 和 ng-show为了完成这样的任务

<button ng-click="hideFormOne()">Hide Form One</button><!-- Hides Form One & Shows Form Two -->
<button ng-click="hideFormTwo()">Hide Form Two</button><!-- Hides Form Two & Shows Form One-->

<form ng-show="showFormTwo">
:
:

<form ng-show="showFormOne">
:
:

脚本

$scope.hideFormOne = function()
{
 $scope.showFormOne = false; // Hides Form One
 $scope.showFormTwo = true;  // Shows Form Two
}

$scope.hideFormTwo = function()
{
 $scope.showFormTwo = false; // Hides Form Two
 $scope.showFormOne = true;  // Shows Form One
}