Question

我有两个下拉列表来自Rest Service。第一次下拉不使用参数。使用First下拉参数中的第二个下拉列表。

此代码用于获取休息服务

service.js

app.service("GetCategoryService", function ($http) {
    this.GetCategory = function () {
        return $http.get("http://localhost:51458/ServiceRequest.svc/GetCategory/");
    };

    this.GetSubCategory = function (category) {
        return $http.get("http://localhost:51458/ServiceRequest.svc/GetSubCategory/" + category);
    };
});

此控制器的代码为html

entryCtrl.js

(function(app) {
  'use strict';

  app.controller('entryCtrl', entryCtrl);

  entryCtrl.$inject = ['$scope', 'GetCategoryService'];

  function entryCtrl($scope, GetAllEntryService, GetCategoryService) {
    $scope.pageClass = 'page-entry';
    //To Get Category
    $scope.Category = function() {
      var promiseGet = GetCategoryService.GetCategory();
      promiseGet.then(function(pl) {
          $scope.GetCategory = pl.data
        },
        function(errorPl) {
          console.log('Some Error in Getting Records.', errorPl);
        });
    }
    $scope.Category();

    //To Get Sub Category
    $scope.SubCategory = function() {
      var promiseGet = GetCategoryService.GetSubCategory();
      promiseGet.then(function(pl) {
          $scope.GetSubCategory = pl.data
        },
        function(errorPl) {
          console.log('Some Error in Getting Records.', errorPl);
        });
    }
    $scope.SubCategory();
  }
})(angular.module('entry'));

entry.html

<div class="form-group">
  <label class="control-label col-sm-2" for="category">Category:</label>
  <div class="col-sm-4">
    <div class="dropdown">
      <select class="form-control" ng-model="Category" ng-init="Category = Category[0]" ng-options="item.ITEM_TEXT for item in GetCategory">
        <span class="caret"></span>
      </select>
    </div>
  </div>
</div>
<div class="form-group">
  <label class="control-label col-sm-2" for="subCategory">Sub Category:</label>
  <div class="col-sm-10">
    <div class="dropdown">
      <!--I Don't Know what must I fill this-->
    </div>
  </div>
</div>

第一个下拉列表中的输出服务，例如[{"ITEM_TEXT":"APP"},{"ITEM_TEXT":"IT"}]

来自第二个下拉菜单/子类别的输出服务，例如[{"ITEM_TEXT":"TROUBLESHOOTING"},{"ITEM_TEXT":"REQUEST NEW USER"}]

帮助onChange进行第二次下拉

Answer 1

我想我得到了你现在要做的事。

entryCtrl.js 的

(function(app) {
  'use strict';

  app.controller('entryCtrl', entryCtrl);

  entryCtrl.$inject = ['$scope', 'GetCategoryService'];

  function entryCtrl($scope, GetAllEntryService, GetCategoryService) {
    $scope.pageClass = 'page-entry';

    //Set initial Category and Subcategory to be empty
    $scope.Category = '';
    $scope.SubCategory = '';

    //To Get Category
    $scope.GetCategory = function() {
      var promiseGet = GetCategoryService.GetCategory();
      promiseGet.then(function(pl) {
          //Set categories data to the response
          //This is an array of objects
          $scope.Categories = pl.data;
        },
        function(errorPl) {
          console.log('Some Error in Getting Records.', errorPl);
        });
    }
    //Fetch the categories, sets $scope.Categories
    $scope.GetCategory();

    //To Get Sub Category
    $scope.GetSubCategory = function(category) {
      //If user picks "Select Subcategory", do nothing
      if (category === '') return false;

      //Unset SubCategories so the select box is not shown until loading is done
      $scope.SubCategories = null;

      var promiseGet = GetCategoryService.GetSubCategory(category);
      promiseGet.then(function(pl) {
          //Set subcategories
          $scope.SubCategories = pl.data;
        },
        function(errorPl) {
          console.log('Some Error in Getting Records.', errorPl);
        });
    }
  }
})(angular.module('entry'));

entry.html 的

<div class="form-group" ng-show="!!Categories">
  <label class="control-label col-sm-2" for="category">Category:</label>
  <div class="col-sm-4">
    <div class="dropdown">
      <select class="form-control" id="category" ng-model="Category" ng-change="GetSubCategories(Category)">
        <option value="">Select Category</option>
        <option ng-repeat="CategoryObject in Categories" value="{{CategoryObject.ITEM_TEXT}}">{{CategoryObject.ITEM_TEXT}}</option>
      </select>
    </div>
  </div>
</div>
<div class="form-group" ng-show="!!SubCategories">
  <label class="control-label col-sm-2" for="subCategory">Sub Category:</label>
  <div class="col-sm-10">
    <div class="dropdown">
      <select class="form-control" id="subCategory" ng-model="SubCategory">
      <option value="">Select Subcategory</option>
      <option ng-repeat="SubCategoryObject in SubCategories" value="{{SubCategoryObject.ITEM_TEXT}}">{{SubCategoryObject.ITEM_TEXT}}</option>
    </div>
  </div>
</div>

如何使用参数AngularJs onChange下拉值

1 个答案: