How to get selected value from a ng-modell select field for an interdepende

Question

How to get value from an angular form (ng-model type select dropdown field) for an interdependent select field for countries->states->cities, into a PHP variable or php page? I am a newbie in angular js and have no idea how to integrate angular js in a PHP project. I am sharing the code below for your reference. Thanks in advance.

<div ng-controller="CountryCntrl_p" class="field-wrapper">
                            <label for="candidate_country" class="label11">Country</label>
                            <select id="country" class="form-element" ng-model="states" name="candidate_country1" ng-options="country for (country, states) in countries track by country" required>
                              <?php
                              foreach($countries as $country)
                              {
                                echo('<option value='.$country['id'].'>'.$country['name'].'</option>');
                              }
                              ?>
                            </select>

                          <div ng-show="states" class="w-100">
                            <div class="field-wrapper">
                              <label for="candidate_states" class="label11">States</label>
                               <select id="state" class="form-element" ng-disabled="!states" name="candidate_states1" ng-model="cities" ng-options="state for (state,city) in states" required>
                              <?php echo('<option value="" selected>Selected:'.$perAddress['pState'].'</option>');?>
                            </select>
                          </div>
                        </div>
                          <div ng-show="cities" class="w-100">
                            <div class="field-wrapper">
                            <label for="candidate_district" class="label11">District</label>
                              <select id="city" class="form-element" name="candidate_district1" ng-disabled="!cities || !states" ng-model="city" required>
                                <?php echo('<option value="" selected>'.$perAddress['pDistrict'].'</option>');?>
                              <option ng-repeat="city in cities" value='{{city}}'>{{city}}</option>
                            </select>
                          </div>
                        </div>
                      </div>

I tried to get the value using the POST function in the target page but it shows NULL for the array whereas I do get the correct value for city and country without any issue.

Answer 1

Angularjs happens in the browser. PHP happens at the server. You are mixing the 2 here incorrectly. With AngularJS you want to have only HTML in your HTML page. Use the controller and a service to load the data into your controller. The HTML will access variables in your $scope.

For example lets look at your select element. You are almost correctly setting up the HTML, but notice how I changed your ng-options :

 <select id="state" class="form-element" 
     ng-disabled="!states" name="candidate_states1" 
     ng-model="cities" ng-options="state.city as state.state for state in states" 
     required>
 </select>

Looks great (notice I removed the PHP code) and is ready to process an object $scope.states.

Lets say you have a script on your server /data.php that, when queried, will echo this JSON - which your javascript will receive and parse.

$states = array(array("state" => "California", "city" => "Valencia"), 
          array("state" => "Idaho", "city" => "Boise"), 
          array("city" => "Manhattan", "state" => "New York"));
echo json_encode(array("states" => $states));

Its best practices to separate your ajax calls into a service, but for simplicity, you can do it in your controller. In your controller CountryCntrl_p you can do something like this:

... 
$http({ 
   method: "get",
   url: "https://my-php-page.com/data.php"
}).then(function(data) {
   $scope.states = data.states
});
....

Which should turn itself into the following states array. This snippet shows an example that might help. Here I have hardcoded the states array to show you how the data should be structured, but in reality this will be coming from your PHP.

angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.states = [{
      city: "Valencia",
      state: "California"
    }, {
      city: "Boise",
      state: "Idaho"
    }, {
      city: "Manhattan",
      state: "New York"
    }]
  }]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.min.js"></script>
<div ng-app="selectExample">
  <div ng-controller="ExampleController">

    <select id="state" class="form-element" ng-disabled="!states" name="candidate_states1" ng-model="cities" ng-options="state.city as state.state for state in states" required>
    </select>
    <hr>
    <p ng-if="!cities">Select a state to see the city</p>
    <p ng-if="cities">{{cities}}</p>

  </div>
</div>