javascript - Angular 和链接下拉列表不保存数据

Question

我试图让我的 View 包含 3 个下拉列表和一个提交按钮。我已经弄清楚如何在包含数据之前不显示下拉列表。我已经弄清楚如何在更改前一个下拉列表时加载它。但是，我有几个问题。这是代码，然后我将解释问题:

View :

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Type of Law</label>
                <select class="form-control" id="lawType" ng-change="getCourthouse();" data-ng-model="typeoflaw">
                    <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" data-ng-show="courtHouse.length">
                <label for="courtHouse">Courthouse</label>
                <select class="form-control" id="courtHouse" data-ng-model="courtHouse" ng-change="getCourtroom();">
                    <option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" data-ng-show="courtRoom.length" data-ng-model="courtRoom">
                <label for="courtRoom">Department</label>
                <select class="form-control" id="courtRoom">
                    <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button">
                <button class="btn  btn-primary pull-left">Add Favorite</button>
            </div>
        </div>
    </div>
</div>

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 () {

      };

  }]);

问题:

1. 加载第一个下拉列表“法律类型”时，它没有按照我在标记中的要求选择“--选择法律类型--”。事实上，“选择法律类型”上方只有一个空条目，并且默认处于选中状态。如何在加载时选择列表中的初始条目？
2. 当第一个下拉列表发生更改(进行选择)时，它会加载第二个下拉列表，但第一个下拉列表除了前面提到的空白行和“选择法律类型”条目之外为空。如何让它保存那里的数据并正确显示所选项目？
3. 当第二个下拉列表更改时，它会加载第三个下拉列表，但与第一个下拉列表有相同的问题......它会清空自身，并且也不显示用户所做的选择。如何使其不为空并仍然显示用户所做的选择？

谢谢!

Answer 1

我解决在一个或多个 Controller 之间传递数据问题的方法是使用服务。这是一个服务示例

var NameService = function () {
    var service = this;
    service.property= value;
    service.getProperty = function () {
        return property;
    }
};
ngapp.service('NameService', NameService);

最酷的事情是您可以将服务注入(inject) Controller 中

appcontroller.$inject = ['$scope', '$http', 'NameService'];
$.ajaxSetup({
    async: false
});
var NameCtrl = function ($scope, $http, NameService) {
    var Property = NameService.Property;
    $scope.update = function () {
        NameService.Property= $scope.Properties.selectedProperty.PropertyId;
    }
};
appcontroller.controller('NameCtrl', NameCtrl);