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);
        });

    }

这里是plunker 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
}

Answer 2

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

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

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

点击按钮：

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

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

});

Answer 3

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

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

单击formA：

的示例

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

例如，点击了formB：

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

以下是Plunker Demo

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

3 个答案: