Angular and linked drop down lists not holding data

Question

I am attempting to make my view contain 3 dropdown lists and a submit button. I have figured out how to not show a dropdown until it contains data. I've figured out how to get it to load upon change of the previous dropdown. However, I have a couple of issues. Here is the code and then I will explain the issues:

The view:


    
        
            
                Type of Law
                
            
        
        
            
                Courthouse
                
            
        
        
            
                Department

The controller:

JBenchApp.controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', 'UserService', 
  function ($scope, $routeParams, $http, $filter, UserService) {
          // Get the preferences information
      /**UserService.loadType()
      .then(function (lawtypes) {
          $scope.typeoflaw = lawtypes;
      });**/



      $http.get('http://10.34.34.46/BenchViewServices/api/Litigation').success(function (response) {
          $scope.typeoflaw = response;
      });

      //$scope.courtHouse = [{ "Loc_ID": "0", "Loc_Name": "-- Select a Type of Law to Get Courthouse List --" }];
      //$scope.courtHouse = [];
      //$scope.courtRoom = [];

      $scope.getCourthouse = function () {
          var e = document.getElementById("lawType");
          $scope.typeoflawId = e.options[e.selectedIndex].value;
          console.log($scope.typeoflawId);
          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/' + $scope.typeoflawId).success(function (response) {
              $scope.courtHouse = response;

          }).error(function (status, data) {
              console.log("error trapped");
          });
      }

      $scope.getCourtroom = function () {
          var e = document.getElementById("courtHouse");
          $scope.courtHouseId = e.options[e.selectedIndex].value;
          console.log($scope.courtHouseId);
          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/' + $scope.typeoflawId + "/" + $scope.courtHouseId).success(function (response) {
              $scope.courtRoom = response;

          }).error(function (status, data) {
              console.log("error trapped");
          });
      }

      $scope.SavePreferences = function () {

      };

  }]);

The issues:

When the first dropdown, Type of Law, loads, it does not have "--Select a type of law--" selected as I requested in the markup. In fact, there is just an empty entry that is above the "select a type of law" and it is selected by default. How can I make the initial entry in the list be selected at load?
1. When the first dropdown is changed (a selection is made) it loads the second dropdown, but the first dropdown is then empty other than the blank row mentioned previously and the "select a type of law" entry. How do I make it hold the data that was there and show the selected item correctly?
2. When the second dropdown is changed, it loads the third drop down, but has the same problem as the first one...it empties itself and it also doesn't show the selection the user makes. How do I make it not empty itself and still show the selection the user made?

thanks!

Michael Mahony · Accepted Answer

Here is how I ultimately solved the issue.

In the view:


    
        
            
                Select a Type of Law
                
            
        
        
            
                Select a Courthouse
                
            
        
        
            
                Select a Department
                
            
        
        
            
                
            

        
    
    
        
            Your Saved Favorites
        
        
            
        
    
    
        
            Courthouse
        
        
            Department
        
        
            Type of Law
        
        
            Default
        
    
    
        
            {{ userPreference.LocName }} ({{ userPreference.CourtRoom}})

        
            {{ userPreference.CourtRoom}}
        
        
            {{ userPreference.LitigationType }}

In the controller:

JBenchApp.controller('UserCtrl', ['$scope', '$routeParams', '$http', '$filter', '$window', 'HoldState', 
  function ($scope, $routeParams, $http, $filter, $window, HoldState) {


      $scope.isDefault = false;


      $http.get('http://10.34.34.46/BenchViewServices/api/Litigation').success(function (response) {
          $scope.typeoflaw = response;
      });

      $scope.getCourthouse = function () {
          $scope.typeoflawId = $scope.typeoflaw.LitigationType;
          console.log($scope.typeoflawId);
          $scope.courtRoom = [];
          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/' + $scope.typeoflawId.LitigationCode).success(function (response) {
              $scope.courtHouse = response;

          }).error(function (status, data) {
              console.log("error trapped");
          });
      }

      $scope.getCourtroom = function () {
          var e = document.getElementById("courtHouse");
          $scope.courtHouseId = $scope.courtHouse.Loc_ID;
          console.log($scope.courtHouseId);
          $http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/' + $scope.typeoflawId.LitigationCode + "/" + $scope.courtHouseId.Loc_ID).success(function (response) {
              $scope.courtRoom = response;

          }).error(function (status, data) {
              console.log("error trapped");
          });
      }

      $scope.LoadPreferences = function () {

          $http.get('http://10.34.34.46/BenchViewServices/api/UserPreference/dpeng').success(function (response) {
              $scope.userPreferences = response;
          }).error(function (status, data) {
              console.log("error trapped");
          });
      }

      $scope.SavePreferences = function () {
          $scope.userid = 'dpeng';
          $scope.departmentNumber = $scope.courtRoom.CourtRoom;
          $scope.newPreference = {
              "PreferenceID": "0",
              "UserID": $scope.userid,
              "LocID": $scope.courtHouseId.Loc_ID,
              "CourtRoom": $scope.departmentNumber.CourtRoom,
              "IsDefault": $scope.isDefault,
              "LitigationCode": $scope.typeoflawId.LitigationCode
          };
          $http({
              method: 'POST',
              url: 'http://10.34.34.46/BenchViewServices/api/UserPreference/Post',
              data: $scope.newPreference,
              headers: {
                  'Content-Type': 'application/json'
              }
          }).then(function(response) {
              LoadPreferences();
              console.log(response);
          }, function(response) {
              console.log(response.status + " -- " + response.data + " -- " + response.statusText);
          });
      }

      $scope.showDefaultIcon = function (theStatus){
          return theStatus;
      }

      $scope.showSetAsDefaultIcon = function (theStatus) {
          if (theStatus) {
              return false;
          } else {
              return true;
          }
      }

      $scope.setAsDefault = function (prefId, LitCode, LocID, Dept) {
          alert("setAsDefault function is called")
          var data = {
              "LitigationCode": LitCode,
              "LocID": LocID,
              "CourtRoom": Dept,
              "IsDefault": true
          };

          $http.put(' http://10.34.34.46/BenchViewServices/api/UserPreference/Put/' + prefId, data)
          .then(function (response) {
              LoadPreferences();
              console.log(response);
          }, function (response) {
              console.log(response.status + " -- " + response.data + " -- " + response.statusText);
          });
      }

      $scope.deletePreference = function (prefId) {
          $http.delete('http://10.34.34.46/BenchViewServices/api/UserPreference/Delete/' + prefId);
          LoadPreferences();
      }

      $scope.setPathValues = function (LawType, Bldg, Dept) {
          HoldState.setTypeOfLaw(LawType);
          HoldState.setCourthouse(Bldg);
          HoldState.setDepartment(Dept);
          var a = HoldState.getTypeOfLaw();
          var b = HoldState.getCourthouse();
          var c = HoldState.getDepartment();
          //alert('Law: ' + a + ' Courthouse: ' + b + ' Department: ' + c);
          $window.location.href = 'calendar';
      }

      $scope.LoadPreferences();

  }]);

The key is ng-options:

ng-model="courtHouse.Loc_ID" " ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name"

When I set things up like this the 3 dropdowns sync up perfectly.

Angular and linked drop down lists not holding data

Answers (2)

Related Questions