Filter in ng-Wiederholung nicht anwenden

Question

Ich arbeite an einem Ionic-Projekt, das eine Ansicht hat, die eine scrollbare Liste mit einer Sucheingabe zeigt, die die angezeigten Ergebnisse filtert, diese Ansicht befindet sich in einer Vorlage, die in einer anderen Ansicht geladen wird .

Wir bemerkten, dass die Sucheingabe mit dem Inhalt verschoben wurde, wenn der Bildlauf begann, und verschwand, wodurch es zu einem Problem wurde, wenn Sie gescrollt wurden und die Ergebnisse filtern möchten.

Ich habe versucht, dies zu umgehen, indem Sie den Sucheingang außerhalb der Vorlage ziehen und über dem Platz platzieren, wo es in der Elternansicht geladen wird.

Während dies die Sucheingabe an einem festen Ort rendert, obwohl ich den Controller angegeben habe, der seine Logik verarbeitet, wird der Filter nicht auf die Liste angewendet.

Hier ist, wie mein Code auf der übergeordneten Ansicht aussieht:

<ion-popover-view id="popfecha" class="fit" > 

<ion-view view-title="Nuevo ReSAT"> 
    <ion-content class="padding" data-ng-hide="activity.state.notes || activity.state.reasonShow || activity.state.product_lineShow || activity.state.account || activity.state.contact " > 

    <form name="form" data-ng-submit="submitForm()"> 
     <!-- A long form --> 
    </form> 

    </ion-content> 

    <ion-view class="wrapper" data-ng-show="activity.state.account" > 
    <!-- Filter section --> 

    <div data-ng-controller="AccountCatalogueCtrl" class="item item-input filterSearch bar-header popupBorder borderFirstItemPopup"> 
     <label class="item-input-wrapper"> 
     <i class="icon ion-search placeholder-icon"></i> 
     <input type="text" placeholder="Search" class="form-control" 
       ng-model="filterText.name"> 
     </label> 
    </div> 
    <!-- ./Filter section --> 

    <ion-content class="padding" data-ng-show="activity.state.account" > 
     <div data-ng-controller="AccountCatalogueCtrl" ng-include="'templates/account-catalogue.html'"></div> 
    </ion-content> 
    </ion-view> 

    <ion-content class="padding" data-ng-show="activity.state.notes" > 
    <div data-ng-controller="ActivityNotesCtrl" ng-include="'templates/activity-notes.html'"></div> 
    </ion-content> 

    <ion-content class="padding" data-ng-show="activity.state.reasonShow" > 
    <div data-ng-controller="ReasonCatalogueCtrl" ng-include="'templates/reason-catalogue.html'"></div> 
    </ion-content> 

    <ion-content class="padding" data-ng-show="activity.state.product_lineShow" > 
    <div data-ng-controller="ProductLineCatalogueCtrl" ng-include="'templates/product-line-catalogue.html'"></div> 
    </ion-content> 

    <ion-content class="padding" data-ng-show="activity.state.contact" > 
    <div data-ng-controller="ContactCatalogueCtrl" ng-include="'templates/contact-catalogue.html'"></div> 
    </ion-content> 


</ion-view> 

</ion-popover-view> 

Wie Sie sehen können, bin ich unter Angabe der Controller AccountCatalogueCtrl auf die div, die den Sucheingabe hält und an die div, die die Vorlage lädt account-catalogue.html.

meine Vorlage Ist hier:

<ion-list> 

    <ion-radio class="item-avatar popupBorder borderLastItemPopupIterator whiteBackground" ng-repeat="acc in accountCatalogue | orderBy:'-name' : true | filter:filterText track by acc._id" 
       type="item-text-wrap" ng-value="acc.name" ng-if="!acc.isDivider" ng-click="select(acc); go()" > 
     <img src="img/account.png"> 

     <h2>{{acc.name}}</h2> 

    </ion-radio> 

</ion-list> 
<ion-infinite-scroll 
    ng-if="canLoadAccounts" 
    on-infinite="loadAccounts()" 
    distance="5%"> 
</ion-infinite-scroll> 

ich sogar eine Uhr auf dem filterText Objekt platziert, um zu sehen aktualisiert wurde, hat die Uhr mir zeigen, dass der Eigenschaftsname wurde geändert wird.

Dies ist mein Controller:

var mod = angular.module('starter.controllers'); 

mod.controller('AccountCatalogueCtrl', ['$scope', '$rootScope', '$location', '$timeout', function ($scope, $rootScope, $location, $timeout) { 
    $scope.select = function(acct){ 

    $rootScope.activity.accountId = acct._id; 

    }; 

    $scope.go = function () { 

    $timeout(function(){ 
     $scope.$emit('HideAccount'); 
    },150); 

    }; 
    // Added the lines below to see if the filter was changing 
    // Since in the beginning filterText doesn't exist undefined is returned 
    // Later when a value is placed in the input then the filterText object is created  
    $scope.$watch('filterText.name', function(n, o){ 
    console.log('filter updated ' + JSON.stringify(n) + ' ' + JSON.stringify(o)); 
    }); 
}]); 

Wenn ich die Sucheingabe in meiner Vorlage platzieren, wird der Filter angewendet, aber wenn außerhalb des Filters platziert wird nicht angewendet. Mache ich etwas falsch in meiner Implementierung? Wie kann ich sicherstellen, dass der Filter auch dann angewendet wird, wenn sich die Komponente, die ihn erhalten hat, außerhalb der Vorlage befindet, die den Filter verwendet?

Answer 1

löste ich dieses Problem, indem Sie den Controller aus der Sucheingabe zu entfernen, so sah es wie folgt aus:

<!-- Filter section --> 

<div class="item item-input filterSearch bar-header popupBorder borderFirstItemPopup"> 
    <label class="item-input-wrapper"> 
    <i class="icon ion-search placeholder-icon"></i> 
    <input type="text" placeholder="Search" class="form-control" 
      ng-model="filterText.name"> 
    </label> 
</div> 
<!-- ./Filter section --> 

ich sah, dass ich filterText auf meinem Controller AccountCatalogueCtrl auf die Komponente aufgrund zugreifen konnten, die den Katalog zeigt hat Zugriff auf die Bereichsvariablen von der übergeordneten Komponente, die es enthält. Auf diese Weise konnte ich den Wert außerhalb von AccountCatalogueCtrl ändern und den Filter in der Liste beeinflussen.