Question

我遇到了奇怪的问题。实际上我从ajax获取数据并在文本框中显示。

所以，基本上我有3个文本框（City，City1，City2）。默认情况下，城市文本框是可见的，如果他们有来自Ajax的数据，则会显示。

用户可以通过单击+按钮添加城市，或通过单击 - 按钮删除。

我能够在文本框上正确地获取和显示数据。

但是当我想通过点击+按钮添加/显示City1或City时。它只是执行表单提交事件。

这是Ajax调用的代码。

formApp.controller('getprofile', function($scope,$http){
     $http({
                          url: 'get_job_city.php',
                            method: "GET",
                            params: {uid: uid}
                         })
                    .success(function(data) {

                        if (data.success) {

                      $scope.formData.city1 = data.city1;
                     $scope.formData.city = data.city;
                        $scope.formData.city2 = data.city2;        
                          }
                    });
                     })

表单保存代码和显示隐藏城市文本框。

var formApp = angular.module('formApp', []);

    formApp.controller('formProfile1', function($scope,$http){

        $scope.secondcity1city1 = false;
        $scope.thirdcity2 = false;      

    $scope.hidecity1 = function() { $scope.secondcity1 = false; }
  $scope.hidecity2 = function() { $scope.thirdcity2 = false; }    

$scope.showcity = function() { $scope.secondcity1 = true; }
$scope.showcity1 = function() { $scope.thirdcity2 = true; }    


      $scope.formData = {};

        $scope.formprofile1 = function() {
             $scope.ajaxload = true;
          var allData={'formData': $scope.formData, 'uid': uid}
        $http({
              method  : 'POST',
              url     : 'city_update_exec.php',
              data : allData,
              headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers  
          })
              .success(function(data) {
            $scope.ajaxload = false;
                   if (!data.success) {
                        $scope.errorcity = data.errors.city; 
                       $scope.errorcity1 = data.errors.city1; 
                       $scope.errorcity2 = data.errors.city2;        


                  }else{

                    alert('City has been updated.');
                  }

              });


      };

    })

HTML代码如下。

<div class="container" ng-controller="formProfile1">
  <form name="formProfile1" method="post" id="formProfile1"
        ng-submit="formprofile1()" role="form">
    <div ng-controller ="getprofile">    
      <div id="firstcity">   
        <div class="col-xs-10">
          <div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }">
            <input name="city" id="city" type="text"
                   class="form-control textbox1 txt-auto" 
                   required="required" placeholder="Job Location* "
                   ng-model="formData.city">
            <div class = "errorba" ng-show="errorcity">{{errorcity}}
            </div>
          </div>
        </div>
        <div class="col-xs-2">
           <!--<button class="remove" ng-click="removeChoice()">-</button>-->
        </div>


        <button class="addfields" ng-click="showcity()">+</button><br>
      </div>

      <div ng-show="secondcity1"> 
        <div class="col-xs-9"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }">
          <input name="city1" id="city1" type="text"
               class="form-control textbox1 txt-auto"
               placeholder="Job Location* " ng-model="formData.city1">
          <div class = "errorba" ng-show="errorcity">{{errorcity1}}
          </div>
        </div>
      </div>
      <div class="col-xs-3">
        <button class="remove" ng-click="hidecity1()">-</button>
        <button class="addfields" ng-click="showcity1()">+</button><br>
      </div>

    </div>

    <div ng-show="thirdcity2"> 
      <div class="col-xs-10"><div class="topjob_resumetitle" 
           ng-class="{ 'has-error' : errorcity2 }">
        <input name="city2" id="city2" type="text"
           class="form-control textbox1 txt-auto"
           placeholder="Job Location* " 
           ng-model="formData.city2">
        <div class = "errorba" ng-show="errorcity2">{{errorcity2}}
      </div>
    </div>
  </div>
  <div class="col-xs-2">
    <button class="remove" ng-click="hidecity2()">-</button>
  </div>

         More text boxes are here

</div>

Answer 1

删除method =“post”并在表单标记上添加novalidate，它将停止html5验证

<form name="formProfile1" novalidate id="formProfile1"
    ng-submit="formprofile1()" role="form">

如果它仍无法正常工作，请将所有按钮更改为

 <input type="button">//for rest of the buttons
 <input type="submit">//for submit button

Answer 2

问题在于您没有为按钮设置类型，因此默认为提交类型，这将在单击时提交在DOM中找到的第一个父表单。要允许自定义点击处理程序正确执行，请将按钮类型更改为“按钮”，如下所示：

<button type="button" class="addfields" ng-click="showcity()">+</button><br>

Answer 3

要发出http请求，您不需要使用单独的控制器。在代码中使用工厂方法获取ajax并将其作为依赖项注入控制器。请参阅Angular Factory method

Angularjs中嵌套的ng-controller问题

3 个答案: