Ways to retrieve the chosen option in an Angular.js controller

Question

Ways to retrieve the chosen option in an Angular.js controller

When using two select elements, the options in the second select must depend on the value selected in the first select. For example, I want to populate a list of companies (in the 2nd <select>) based on a particular service chosen in the 1st <select>:

<div ng-controller="GetCompaniesByService as class">
    <select ng-options="service.name for service in class.services"  ng-model="selectedService"></select> 
    Chosen service_id: {{ selectedService.id }}
    <select ng-options="company.name for company in class.companies"  ng-model="selectedCompany"></select> 
  </div>

In order to access the current selectedService.id value from the model within the controller, you can dynamically load data via ajax from a URL like this:

$http.get('http://127.0.0.1:3000/service/'+selectedService.id)

This data can then be used to populate the options in the second <select>.

javascript angularjs

Answer 1

Answer №1

Don't forget to keep an eye on the selectedService variable in your controller scope. Start by setting the initial value of selectedService to "false", and then once the user changes the option, selectedService will be updated with the value of the selection.

As soon as selectedService is no longer "false", display the second select/option.

Your HTML :

<div ng-controller="GetCompaniesByService as companyCtrl">
    <select ng-options="service as service.name for service in companyCtrl.services"  ng-model="selectedService"></select> 
Chosen service_id: {{ selectedService.id }}
    <select ng-options="company as company.name for company in companyCtrl.companies"  ng-model="selectedCompany" ng-show="selectedService"></select> 
</div>

Your Controller :

app.controller('GetCompaniesByService',function($scope){
    $scope.companyCtrl = {};                  //initialize the companyCtrl object
    $scope.companyCtrl.services = [...];      //perform your first $http request here
    $scope.selectedService = false;
    $scope.companyCtrl.companies = function(){
        if(selectedService){
            return $http.get('http://127.0.0.1:3000/service/'+selectedService.id)
             .success(function(data){return data;})
             .error(function(error){return [];});
        }
        else{
            return [];
        }
    };
});

Answer 2

Don't forget to keep an eye on the selectedService variable in your controller scope. Start by setting the initial value of selectedService to "false", and then once the user changes the option, selectedService will be updated with the value of the selection.

As soon as selectedService is no longer "false", display the second select/option.

Your HTML :

<div ng-controller="GetCompaniesByService as companyCtrl">
    <select ng-options="service as service.name for service in companyCtrl.services"  ng-model="selectedService"></select> 
Chosen service_id: {{ selectedService.id }}
    <select ng-options="company as company.name for company in companyCtrl.companies"  ng-model="selectedCompany" ng-show="selectedService"></select> 
</div>

Your Controller :

app.controller('GetCompaniesByService',function($scope){
    $scope.companyCtrl = {};                  //initialize the companyCtrl object
    $scope.companyCtrl.services = [...];      //perform your first $http request here
    $scope.selectedService = false;
    $scope.companyCtrl.companies = function(){
        if(selectedService){
            return $http.get('http://127.0.0.1:3000/service/'+selectedService.id)
             .success(function(data){return data;})
             .error(function(error){return [];});
        }
        else{
            return [];
        }
    };
});

Ways to retrieve the chosen option in an Angular.js controller

Answer №1

Similar questions

Node.js - updating the value of a exported integer variable

center the view on the specified element

Alternative names for the identical dynamic route slug in Next.js involve redirection methodology on stackoverflow platform

Retrieving the list id during item reordering in ng-sortable

Python Eve encountering WSGI issue [Errno 32] causing a broken pipe during an Ajax call

JSON geometry imported is not following the movement of the bones

Enhancing CKEditor: Inserting new elements upon each dialog opening

Capture video calls in a room exclusively when the user initiates recording by pressing the record button on Twilio

Creating a Shopping Cart using Laravel and Angular

Enhance the functionality of your Angular templates by utilizing filters to showcase object or model properties that may not be functioning

Ways to prevent a single element from being included in the selection of the entire

Sending a function in React.js from one functional component to another

Navigating with React to a specific endpoint does not display the expected content

Unable to refund items in the list box

redux reducer returns an empty array after applying filter to the state

Guide to including user-defined headers in Angular's httpRequest

Streamlining a menu using ng-repeat

My objective is to use JavaScript to dynamically update information in an HTML document using data retrieved from a JSON file

What steps can be taken to address an undefined error before the execution of useEffect?

Creating custom fields with user input in WordPress widgets