[英]Event Listener on md-autocomplete?
我正在用angularjs开发应用程序,并且正在使用自动完成功能。
在此应用程序中,有些字段在选择自动完成项目之前无法填写。
这种形式的字段取决于其他两个字段的结果,如下所示:
在此,仅当选择了UC时,才会释放Ordem,Tipo de Fluxo,Fluxo Pai和Descrição字段。
有争议的领域是Fluxo Pai,根据UC和Tipo de Fluxo中给出的响应,选择范围有所不同。
我不能简单地询问要用于过滤的WebService,因为它没有此过滤器,因此必须使用javascript。
我当时正在考虑使用一个事件,当选择一个UC并选择一个Tipo de Fluxo时,它将在过滤器上应用过滤器。
提前致谢
最后,我正在使用的代码。
风景
<form name="flowRegister" ng-submit="save()">
<div layout="row">
<md-autocomplete flex required md-input-name="flowuc" md-no-cache="noCache" md-selected-item="flow.idusecase" md-search-text="searchText"
md-items="item in querySearch(searchText)" md-item-text="item.Description" md-require-match md-floating-label="UC"
md-no-asterisk>
<md-item-template>
<span>{{item.Description}} -- <strong>{{item.Aplication}}</strong> // <strong>{{item.Code}}</strong></span>
</md-item-template>
</md-autocomplete>
</div>
<div layout="row">
<div layout="column" flex="10">
<md-input-container class="md-block">
<label>Ordem</label>
<input type="number" name="flowStep" min="0" ng-model="flow.step" required data-ng-disabled="flow.idusecase == null">
</md-input-container>
</div>
<div layout="column" flex="20">
<md-input-container class="md-block">
<label>Tipo de fluxo</label>
<md-select ng-model="flow.idflowtype" required data-ng-disabled="flow.idusecase == null">
<md-option ng-repeat="flowtype in flowtypesVM" value="{{flowtype.Id}}">
{{flowtype.Description}}
</md-option>
</md-select>
</md-input-container>
</div>
<div layout="column" flex="20">
<md-input-container class="md-block">
<label>Fluxo pai</label>
<md-select ng-model="flow.idflowinitial" required data-ng-disabled="flow.idflowtype == 1 || flow.idusecase == null">
<md-option value="0" selected>
Nenhum
</md-option>
<md-option ng-repeat="flowtype in flowtypes" value="{{flowtype.Id}}">
{{flowtype.Description}}
</md-option>
</md-select>
</md-input-container>
</div>
<div layout="column" flex="60">
<md-input-container class="md-block">
<label>Descrição</label>
<input type="text" name="flowDesc" ng-model="flow.desc" required data-ng-disabled="flow.idusecase == null">
</md-input-container>
</div>
<div layout="column" flex="10" layout-align="top center">
<md-button type="submit" class="md-fab md-primary md-hue-2 md-mini" aria-label="Profile">
<md-icon md-font-set="material-icons">add</md-icon>
</md-button>
</div>
</div>
控制器
app
.controller('flCtrl', function ($rootScope, $scope, $flow, $flowtype, $usecase, $timeout, $q) {
$rootScope.menu = "Cadastro de Flow";
$scope.flow = { id: 0, usercreate: "app.outros" };
// $scope.usecases = loadAll();
$usecase.load(function (usecases) {
$scope.usecases = usecases.result;
}, function (err) {
console.log(err);
});
// console.log($scope.usecases);
$scope.selectedItem = null;
$scope.searchText = null;
$scope.querySearch = querySearch;
$flowtype.load(function (flowtypes) {
$scope.flowtypesVM = flowtypes.result;
}, function (err) {
console.log(err);
});
$flow.load(function (flowsvm) {
$scope.flowsvm = flowsvm;
}, function (err) {
console.log(err);
});
$scope.usecaseflows = [];
$scope.save = function () {
// alert("Olá");
var flow = $scope.flow;
flow.idusecase = $scope.flow.idusecase.Id;
var param = [flow];
$flow.save(param)
.then(function (resolve) {
alert("Ok!");
$scope.flowRegister.$setPristine();
document.flowRegister.reset();
})
.catch(function (reject) {
})
}
function querySearch(query) {
var results = query ? $scope.usecases.filter(createFilterFor(query)) : $scope.usecases;
return results;
}
function createFilterFor(query) {
return function filterFn(usecases) {
return (usecases.Description.indexOf(query) === 0);
};
}
});
我认为您可以执行以下操作:
app.controller('flCtrl', function ($rootScope, $scope, $flow, $flowtype, $usecase, $timeout, $q) {
...
$scope.$watch('flow', function(){
if(flow.idflowtype && flow.idusecase) {
// call apply filter function here
}
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.