如何在更改按钮上更改表单？

I have two json files "a.json" and "b.json". I need to show a different form when the user clicks each of the different buttons. My issue is that when I click on the first button it show the first form, but when I click on the second button it doesn't show the second form. I need to show one form at a time, i.e. when I click the second button it removes the first form and shows the second form.

我有两个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);
        });

    }

here is plunker http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview

这里是plunker http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview

3 个解决方案

#1

Dont mix JQuery with AngularJs

不要将JQuery与AngularJs混合使用

you can use ng-click and ng-show for achieving such Task

您可以使用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">
:
:

script

脚本

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

#2

If i understand u can use hide() function:

如果我明白你可以使用hide（）函数：

on document load u need hide both forms:

在文档加载你需要隐藏两种形式：

$('#form1').hide();
$('#form2').hide();

And on button click:

点击按钮：

$('#button1').click(function(){
 $('#form1').show();
 $('#form2').hide();

});
$('#button2').click(function(){
 $('#form1').hide();
 $('#form2').show();

});

#3

You can have two forms, eg formA and formB.

您可以有两种形式，例如formA和formB。

And then if user click on formA, hide formB or click on formB then hide formA.

然后，如果用户单击formA，隐藏formB或单击formB然后隐藏formA。

Example if clicked formA:

单击formA的示例：

$('formA').hide();
$('formB').show();

And example if clicked formB:

例如，如果点击了formB：

$('formA').show();
$('formB').hide();

Here is Plunker Demo

这是Plunker演示

#1