Слушатель событий на md-autocomplete?

Question

Я разрабатываю приложение в angularjs и использую автозаполнение.

В этом приложении есть поля, которые нельзя заполнить до выбора элемента в автозаполнении.

В этой форме есть поле, которое зависит от результата двух других полей, как показано ниже:

Здесь поля Ordem, Tipo de Fluxo, Fluxo Pai и Descrição освобождаются, только если выбран UC.

Поле, о котором идет речь, - это 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);
        };

    }
});

Answer 1

Я думаю, что вы могли бы сделать что-то вроде этого:

  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

          }


      })


   })