Javascript 使用Angularjs选择2下拉列表后调用单个函数
MyHTML视图:一旦用户选择了这两个选项,它应该调用控制器内部的函数Javascript 使用Angularjs选择2下拉列表后调用单个函数,javascript,angularjs,angular-ui-grid,Javascript,Angularjs,Angular Ui Grid,MyHTML视图:一旦用户选择了这两个选项,它应该调用控制器内部的函数 <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 GetPlatformRegion
<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;
});
};
我将向第二个ui select添加一个函数,为select构建一个计数器,并使用一个名为的函数来检查是否已达到该数字: 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
此方法将处理checker函数中的增量,以将代码输出一位:
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!");
}
}
修改版本以允许更改选择
在两个下拉列表中的change和change时调用相同的函数。
检查函数内部的条件并相应地执行 否则,您无需在控制器中创建任何函数即可完成此操作。首先,需要在控制器中启动变量:
$scope.GetPlatformRegionName = {}
$scope.GetGsmName = {}
在您看来,只有在定义了另一个变量时,才可以使用&&运算符调用on select函数,如下所示:
on-select="ctrl.GetPlatformRegionName.selected && yourFunctionToCall()"
对于第二个ui,选择:
on-select="ctrl.GetGsmName.selected && yourFunctionToCall()"
然后,仅当选择了booth ui select时才会调用该函数
是一个工作的plunker。您的意思是只有在两个下拉菜单都被选中的情况下才调用该函数?是的,确实如此……或者如果您有其他想法在从两个下拉菜单中获取值后调用一个函数好的,还添加了一个更小的第二个版本。没有经过测试,但这是我想要的方向head@Brian但是,如果用户选择第一个选择并更改此选择,则if selectCount===actOnSelectCount将为true,而第二个选择仍未设置。不如果你想擦干你的代码,我认为你应该删除selectedfetchdd和onSelectedFetchOther两个函数中的一个,因为它们做的是完全相同的工作。我添加了一个版本来跟踪所做的选择以修复该问题。RE:函数做相同的工作,是的,它们在示例中。基于这个问题,函数在实现$http.get'a'…,$http.get'b'中将做得更多。。。。在完整的实现中,唯一相同的部分是管理选择列表本身。
on-select="ctrl.GetPlatformRegionName.selected && yourFunctionToCall()"
on-select="ctrl.GetGsmName.selected && yourFunctionToCall()"