javascript - 使用 Angularjs 选择 2 个下拉列表后调用一个函数

Question

我的 Html View :一旦用户选择了这两个选项，它应该在 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>

我的 Controller 这是我 Controller 中的函数

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

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

Answer 1

我会向第二个 ui-select 添加一个函数，为 # selected 构建一个计数器，并调用一个函数来检查是否已达到数字:

HTML

(忽略 HTML 中的空格，因此在没有它的情况下不断删除它)

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

稍微简单的JS

此方法将检查器函数中的增量处理为 DRY把代码拿出来一点:

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

允许更改选择的修改版本

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