Issue with nested ng-controller in Angularjs

Question

I am stuck with strange issue. Actually I am fetching the data from ajax and showing it on text boxes.

So, basically I have 3 text box (City, City1, City2). By default City textbox is visible rest will show if they have data from Ajax.

User can add city by clicking + button or remove by click on - button.

I am able to fetch and show the data properly on textboxes.

But when I want to add/show City1 or City by clicking on + button. It is simply executing form submit event.

Here is code for Ajax call.

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 for form save and show hide city textboxes.

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 are below.

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

The more code there is to go through, the less likely people can find your problem. Streamline your example. See How to create a Minimal, Complete, and Verifiable example. — georgeawg
– georgeawg, Commented Apr 23, 2017 at 16:09

Ron E · Accepted Answer · 2017-04-23 16:22:02Z

1

The problem is that you have not set a type for your buttons, and therefore are defaulting to submit types, which will submit the first parent form found in the DOM when clicked. To allow your custom click handlers to execute properly, change your button types to "button" like so:

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

answered Apr 23, 2017 at 16:22

Ron E

2,2522 gold badges17 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Roxx Over a year ago

You saved me. You are genius i can say. You find it out. I was scared that due to large code no one will help me. But you did it.

vaibhavmaster · Accepted Answer · 2017-04-23 16:16:50Z

1

Remove method="post" and add novalidate on form tag it will stop html5 validation

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

Also if its still not works then change all your button to

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

answered Apr 23, 2017 at 16:16

vaibhavmaster

6876 silver badges10 bronze badges

1 Comment

Roxx Over a year ago

second part of your answer was correct. type="button" it was needed. Voted up.

Raghavendra Rao · Accepted Answer · 2017-04-23 13:31:09Z

0

To make an http request you don't need to use the separate controller. Use factory method in your code for ajax and inject it as a dependency in your controller. Refer Angular Factory method

answered Apr 23, 2017 at 13:31

Raghavendra Rao

1309 bronze badges

Collectives™ on Stack Overflow

Issue with nested ng-controller in Angularjs

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related