How to onChange dropdown value using parameter AngularJs

Question

I have two dropdownlist get from Rest Service. First dropdown not using parameter. And the Second dropdown using parameter from First dropdown.

This code for get Rest Service

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);
    };
});

This code for controller to 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>

The output service from first dropdown like [{"ITEM_TEXT":"APP"},{"ITEM_TEXT":"IT"}]

The output service from second dropdown / sub category like [{"ITEM_TEXT":"TROUBLESHOOTING"},{"ITEM_TEXT":"REQUEST NEW USER"}]

Help to onChange for second dropdown

estacks · Accepted Answer · 2016-12-15 04:06:09Z

3

I think I get what you're trying to do now.

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>

edited Dec 15, 2016 at 4:06

answered Dec 15, 2016 at 1:46

estacks

1044 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Stfvns Over a year ago

It's not change. In the inspect element it's not add anything request to. Just when first reload it call http://localhost:51458/ServiceRequest.svc/GetSubCategory/undefined. In html I add this

<select class="form-control" ng-model="SubCategory" ng-init="SubCategory = SubCategory[0]" ng-options="item.ITEM_TEXT for item in GetSubCategory">                                                         <span class="caret"></span>                                             </select>

estacks Over a year ago

You are overwriting your SubCategory function with the result from calling it in that ng-init. You need to add ng-change="functionName(GetCategory" and give your variables and functions different names.

estacks Over a year ago

You were overwriting your Category function with Category[0] = {'ITEM_TEXT': 'APP'}, which is an Object. Category[0].ITEM_TEXT would give you the item text you were looking for. I edited my answer to something cleaner that will hopefully help.

estacks Over a year ago

If you are choosing a new category, it would reset the subcategories, yes? It should be making another call to your svc page and writing new subcategories in that section. If that is broken, try adding delete $scope.

estacks Over a year ago

I'm sorry my comment triggered when I didn't want it to. I updated the code to try setting $scope.SubCategories to null, so that the second select box will not show up while the new SubCategories are loading.

|

Collectives™ on Stack Overflow

How to onChange dropdown value using parameter AngularJs

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related