2017-04-26 120 views
0

我正在开发一个应用程序在angularjs中,并使用自动完成功能。md-autocomplete上的事件监听器?

在此应用程序中,有些字段在选择自动填充中的项目之前无法填充。

有处于这种形式依赖于其他两个字段的结果的字段,如下所示:

这里,ORDEM,TIPO德Fluxo,Fluxo排,和Descrição字段是只有在选择UC时才会发布。

有问题的领域是Fluxo Pai,其中的选择根据UC和Tipo de Fluxo给出的响应而变化。

我不能简单地要求我用来过滤的WebService,因为它没有这个过滤器,所以我必须使用javascript。

我正在考虑使用一个事件,当选择一个UC并且选择一个Tipo de Fluxo时,它将应用过滤器过滤器。

This is the application released

在此先感谢

最后,我使用的代码。

视图

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

    } 
}); 

回答

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 

      } 


     }) 


    })