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

Question

My Html View ：一旦用户选择了这两个选项，它应该调用控制器内部的函数

<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>

我的控制器这是我控制器中的功能

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

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

Answer 1

我会在第二个 ui-select 中添加一个函数，build 为 # selected 添加一个计数器，并有一个函数调用来检查是否达到人数：

HTML

（忽略 HTML 中的 space，所以没有它就继续擦除它）

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

修改版本以允许更改 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!");
    }
}

Answer 2

从两个下拉菜单中调用相同的更改功能 (ng-change)。检查函数内部的条件并相应地执行。

Answer 3

否则，您可以在不在控制器中创建任何函数的情况下执行此操作。首先你的变量需要在你的控制器中启动：

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

并且在您看来，您可以使用 && 运算符使 on-select 函数仅在定义了其他变量时才被调用，如下所示：

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

第二个 ui-select :

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

只有当 booth ui-select 被 selected 时才会调用该函数。

Here 是一个工作的 plunker。

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

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

javascript

angularjs

angular-ui-grid

HTML

JS

稍微简单的JS

修改版本以允许更改 selection