Problem mit verschachtelten ng-Controller in Angularjs

Question

Ich bin mit seltsamen Problem fest. Eigentlich hole ich die Daten von Ajax und zeige sie auf Textfeldern.

Also, im Grunde habe ich 3 Textfeld (City, City1, City2). Standardmäßig ist die Stadt-Textbox sichtbar, Rest wird angezeigt, wenn sie Daten von Ajax haben.

Benutzer kann Stadt hinzufügen, indem Sie auf + Schaltfläche klicken oder durch Klicken auf - Schaltfläche entfernen.

Ich bin in der Lage, die Daten richtig auf Textboxen zu holen und zu zeigen.

Aber wenn ich City1 oder City hinzufügen/anzeigen möchte, indem Sie auf + klicken. Es führt einfach das Form-Submit-Ereignis aus.

Hier ist Code für Ajax Anruf.

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

Code zum Speichern und Anzeigen von Stadttextfeldern ausblenden.

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-Codes sind unten.

<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

Die Problem ist, dass Sie keinen Typ für Ihre Schaltflächen festgelegt haben und daher standardmäßig Übergabetypen verwenden, die das erste übergeordnete Formular senden, das im DOM gefunden wird, wenn darauf geklickt wird. Um die benutzerdefinierte Klick-Handler ordnungsgemäß auszuführen, ändern Sie Ihre Schaltfläche Typen „Knopf“ wie so zu erlauben:

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

Answer 2

Um eine http-Anfrage zu machen, müssen Sie den separaten Controller nicht verwenden. Verwenden Sie die Factory-Methode in Ihrem Code für Ajax und injizieren Sie es als Abhängigkeit in Ihren Controller. Siehe Angular Factory method

Answer 3

Remove method = "post" und fügen Sie novalidate auf Formular-Tag wird es html5 Validierung

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

auch aufhören, wenn seine Werke noch nicht dann alle Ihre Taste

ändern

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