2016-11-21 58 views
0

我开发了一个用于使用ng-grid以表格格式显示数据的代码。在这里,它需要应用自定义过滤器。有两列,即网格中的ID和标题。还有一个建议输入框包含标题。当从输入框中选择任何标题时,网格中的数据应根据所选标题进行过滤。单击网格时,ng-grid过滤受到影响

下面是实现该功能的代码。

HTML

<div ng-app="myApp" ng-controller="MyCtrl"> 
<div class="gridStyle" ng-grid="gridOptions"></div> 
<div style="position: relative; height: 80px;"> 
    <input type="text" name="country" id="autocomplete-ajax" style="position: absolute; z-index: 2; background: transparent;"/> 
    <input type="text" name="country" id="autocomplete" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;"/> 
</div> 

JS

// binding unique names to the suggestions pluggin for filter. 
    $('#autocomplete-ajax').devbridgeAutocomplete({ 
     lookup: $scope.unique, 
     minChars: 1, 
     onSelect: function (suggestion) { 
      console.log(suggestion); 
      $scope.filterSearch('Title',suggestion.value); 
     }, 
     showNoSuggestionNotice: true, 
     noSuggestionNotice: 'Sorry, no matching results'    
    }); 

// configuring ng-grid options 
    $scope.gridOptions = { 
     data: 'videoColl', 
     showGroupPanel: false, 
     jqueryUIDraggable: false, 
     showFilter: false,   
     multiSelect:false, 
     filterOptions: $scope.filterOptions 
    }; 
    $scope.filterSearch = function(searchField,searchText) { 
    var filterText = searchField + ':'+ searchText; 
    $scope.filterOptions.filterText = filterText;  
    }; 

当我选择它过滤数据,但变化不会在网格中显示时的瞬间autocomplete-ajax任何称号我选择任何标题,而是在数据在网格中更改选择任何标题后,我点击网格。

我错过了什么来完美地工作?

+1

您是否在更新filterOptions之后尝试调用'$ scope。$ apply()'? – Palo

回答

1

您在更改过滤器数据后错过了$scope.$apply()调用。

jQuery不在角度范围之内,因此您需要手动调用digest循环来将数据更改应用于您的html。

+0

谢谢。按预期工作100%。 –