JSFiddle - React, Tailwind, and code Playground

by victorrseloy

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div data-ng-app="app.company.assets" data-ng-controller="locationDetailCTRL">

  <div class="row" data-ng-init="loadBranches()">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="branch_id" class="small"><i>Branch</i>
        </label>
        <select class="form-control input-sm" data-ng-init="loadLocations(assetInfo.branch_id)" data-ng-change="loadLocations(assets.branch_id)" id="branch_id" name="branch_id" data-ng-model="assets.branch_id">
          <option data-ng-selected="assetInfo.branch_name ===b.branch_name" data-ng-repeat="b in getBranches_id_name" value="{{b.id}}">{{b.branch_name}}</option>
        </select>
      </div>

    </div>
  </div>

  <div class="row">
    <div class="col-sm-12">
      <div class="form-group">
        <label for="location_id" class="small"><i>Location</i>
        </label>

        <select class="form-control input-sm" id="location_id" name="location_id">
          <option value=""></option>
          <option data-ng-repeat="l in getLocations_id_name" value="{{l.id}}" data-ng-selected="l.location_name == assetInfo.location_name">{{l.location_name}}</option>
        </select>
      </div>
    </div>
  </div>
</div>

JavaScript

var appCompAssets = angular.module('app.company.assets', []);

appCompAssets.controller('locationDetailCTRL', function($scope, $http) {
  // LOAD LOCATION DETAILS

  $scope.loadBranches = function() {

    $http.get('../getBranches_id_name/' + $scope.compid)
      .then(
        function(response) {
          if (response.data.length !== 0) {
            $scope.getBranches_id_name = response.data;
            console.log($scope.getBranches_id_name);
          }
        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for branch id & name');
        });
  };

  $scope.loadLocations = function(branch_id) {
    $scope.branchid = branch_id;
    $http.get('../getLocations_id_name/' + $scope.branchid)
      .then(

        function(response) {

          if (response.data.length !== $scope.branchid) {
            $scope.getLocations_id_name = response.data;
            console.log($scope.getLocations_id_name);
          }

        },
        function(response) {
          // error handling routine
          console.log('$Error: no data for location id & name');
        });
  };
});