Call one single function after 2 drop down is selected using Angularjs

Question

My Html View : Once this two option is selected by user it should call a function inside the controller

<div class="col-lg-7">
        <ui-select on-select="onSelectedFetchDD($item)" ng-model="ctrl.GetPlatformRegionName.selected" theme="selectize" ng-disabled="ctrl.disabled" title="Choose a GetPlatformRegionName" append-to-body="true">
            <ui-select-match placeholder="-- Select --">{{$select.selected.dropDownText}}</ui-select-match>
            <ui-select-choices repeat="GetPlatformRegionName in ctrl.GetPlatformRegionNameList.value | filter: $select.search">
                  <span ng-bind-html="GetPlatformRegionName.dropDownText | highlight: $select.search"></span>
            </ui-select-choices>
        </ui-select>
    </div>

<div class="col-lg-7">
   <ui-select ng-model="ctrl.GetGsmName.selected" theme="selectize" ng-disabled="ctrl.disabled" title="Choose a GetGsmName" append-to-body="true">
       <ui-select-match placeholder="-- Select --">{{$select2.selected.dropDownText}}</ui-select-match>
       <ui-select-choices repeat="GetGsmName in ctrl.GetGSMNameList.value | filter: $select2.search">
            <span ng-bind-html="GetGsmName.dropDownText | highlight: $select2.search"></span>
              <small ng-bind-html="GetGsmName.dropDownValue | highlight: $select2.search"></small>
       </ui-select-choices>
   </ui-select>
</div>

My Controller This is the function in my controller

$scope.fetchDD = function () {
    GSMList.then(function (result) {
        vm.GetGSMNameList = result.data;
    });

    PlatformMasterSchList.then(function (result) {
        vm.GetPlatformMasterSchNameList = result.data;
    });
};

You mean only call the function if both of the dropdowns are selected? — devqon
– devqon, Commented Aug 8, 2017 at 8:47
Or if you have any alternative idea to call a function after getting value from both the dropdown — bpat
– bpat, Commented Aug 8, 2017 at 8:55

Brian · Accepted Answer · 2017-08-10 13:38:16Z

1

I would add a function to the second ui-select, build a counter for # selected, and have a function called that checks whether or not the number has been reached:

HTML

(ignore space in HTML, SO keeps wiping it without it)

<ui-select ng-model="ctrl.GetGsmName.selected" theme="selectize" 
        ng-disabled="ctrl.disabled" title="Choose a GetGsmName" append-to-body="true"
        on-selected="onSelectedFetchOther()">

JS

var actOnSelectCount = 2;
var selectCount = 0;

$scope.onSelectedFetchOther = function() {
    selectCount++;
    doSomethingWhenNumSelected();
}

$scope.onSelectedFetchDD = function(item) {
    selectCount++;
    doSomethingWhenNumSelected();
}

function doSomethingWhenNumSelected = function() {
    if (selectCount === actOnSelectCount) {
        console.log("Doing something, 2 were selected!");
    }
}

Slightly simpler JS

This method will handle the increment in the checker function to DRY out the code a bit:

var actOnSelectCount = 2;
var selectCount = 0;

$scope.onSelectedFetchOther = function() {
    incrementAndActIfReady();
}

$scope.onSelectedFetchDD = function(item) {
    incrementAndActIfReady();
}

function incrementAndActIfReady = function() {
    selectCount++;
    if (selectCount === actOnSelectCount) {
        console.log("Doing something, 2 were selected!");
    }
}

Modified version to allow for a change of selection

var actOnSelectCount = 2;
var selected = [];

$scope.onSelectedFetchOther = function() {
    incrementAndActIfReady('A');
}

$scope.onSelectedFetchDD = function(item) {
    incrementAndActIfReady('B');
}

function incrementAndActIfReady = function(selector) {

    // Push selection to selected if not
    // already there. else it was a change in same
    // select.
    if (selected.indexOf(selector) != -1) {
        selected.push(selector);
    }

    if (selection.length === actOnSelectCount) {
        console.log("Doing something, 2 were selected!");
    }
}

edited Aug 10, 2017 at 13:38

answered Aug 8, 2017 at 8:54

Brian

5,0693 gold badges22 silver badges30 bronze badges

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

3 Comments

Brian Over a year ago

Alright, added a second version as well that is a little smaller. Not tested but this is the direction in which I would head

JeanJacques Over a year ago

@Brian But if the user makes a choice for the first select and change this choice, your if (selectCount === actOnSelectCount) will be true whereas the second select is still not set. No ? And if you want to DRY your code, I think you should remove one of the two functions onSelectedFetchDD and onSelectedFetchOther because they are doing exactly the same job.

Brian Over a year ago

Good point. I added a version to track which selection was made to fix that. RE: functions doing the same job, yes they are in the example. Based on the question, the functions would be doing more in the implementation ($http.get('a').., $http.get('b')...). In a full implementation the only part that would be the same would be managing the select lists themselves.

UniCoder · Accepted Answer · 2017-08-08 08:56:14Z

0

Call the same function on-change (ng-change) from both dropdowns. Check the condition inside the function and execute accordingly.

answered Aug 8, 2017 at 8:56

UniCoder

3,2531 gold badge33 silver badges29 bronze badges

Comments

JeanJacques · Accepted Answer · 2017-08-08 09:47:28Z

0

Else you can do it without creating any function in your controller. First your variables need to be initiate in your controller :

$scope.GetPlatformRegionName = {}
$scope.GetGsmName = {}

And in your view your can use the && operator to make the on-select function called only if the other variable is defined, like this :

on-select="ctrl.GetPlatformRegionName.selected && yourFunctionToCall()"

And for the second ui-select :

on-select="ctrl.GetGsmName.selected && yourFunctionToCall()"

Then the function will be called only if booth ui-select are selected.

Here is a working plunker.

answered Aug 8, 2017 at 9:47

JeanJacques

1,7501 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Call one single function after 2 drop down is selected using Angularjs

3 Answers 3

HTML

JS

Slightly simpler JS

Modified version to allow for a change of selection

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML

JS

Slightly simpler JS

Modified version to allow for a change of selection

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related