AngularJS benutzerdefinierten Filter für Highlight-Text

Question

Ich erstelle einen Filter auf einer Tabelle. Hier ist der Code:

<table id="tableText" class="table table-hover table-striped" ng-init="allNews()"> 
    <tr> 
    <td colspan="5"> 
     <input type="text" placeholder="Ricerca testo" class="form-control" ng-model="inputText"> 
    </td> 
    </tr> 

    <tr> 
    <th>Titolo</th> 
    <th>Text</th> 
    <th>Disattivato</th> 
    <th>Modifica</th> 
    <th ng-if="!cancelDelete">Elimina</th> 
    <th ng-if="cancelDelete">Annulla</th> 
    </tr> 

    <tr ng-repeat="news in allNews | filter : inputText"> 
    <td> 
     <div ng-hide="editingData[news.id]"><span ng-bind-html="news | deleteTitle"></span></div> 
     <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.title" /></div> 
    </td> 

    <td> 
     <div ng-hide="editingData[news.id]"><span ng-bind-html="news | deleteText"></span></div> 
     <div ng-show="editingData[news.id]"><input type="text" class="form-control" ng-model="news.arg" /></div> 
    </td> 

    <td> 
     <div ng-hide="editingData[news.id]"><input type="checkbox" disabled ng-model="news.isDeleted"></div> 
     <div ng-show="editingData[news.id]"><input type="checkbox" ng-model="news.isDeleted"></div> 
    </td> 

    <td> 
     <div ng-hide="editingData[news.id]"><button id="modify" class="btn btn-primary" ng-click="modify(news, $event)">Modifica</button></div> 
     <div ng-show="editingData[news.id]"><button id="accept" class="btn btn-success" ng-click="update(news)">Accetta</button></div> 
    </td> 

    <td> 
     <div ng-hide="editingData[news.id]"><button id="delete" class="btn btn-danger" ng-click="delete(news.id)">Cancella</button></div> 
     <div ng-show="editingData[news.id]"><button id="cancel" class="btn btn-danger" ng-click="cancelModify()">Annulla</button></div> 
    </td> 
    </tr> 
</table> 

Der Eintrag auf dem Tisch von db gelesen wird:

$scope.allNews = function() { 
    var url = '/data_db.asmx/GetAllNews'; 
    var obj = {}; 
    $http.post(url, obj) 
    .success(
    function (response) { 
     if (response.Error) { 
     console.log('Server error'); 
     } 
     else { 
     $scope.allNews = response.d; 
     } 
    }) 
    .error(
    function (response) { 
     console.log('Unkwnow error.'); 
    }); 
} 

Ich mag würde den Text markieren, die Suche in der ersten Zeile der Tabelle ist. Für jetzt erhalte ich diesen Fehler:

angular.js:13920 Error: [filter:notarray] Expected array but received: function()

aber der Filter funktioniert.

Answer 1

Ihr Problem ist, dass $scope.allNews ein function ist. Wenn Sie es in ng-repeat Direktive verwenden und die Direktive zum ersten Mal ausgewertet wird, wird Ihr eckiger versuchen, die allNews Eigenschaft Ihres $scope als ein Array zu untersuchen.

Wenn die Funktion das erste Mal aufgerufen wird (was vielleicht nie passieren wird, wenn der Fehler zuerst auftritt), überschreibt sie die allNews -Eigenschaft mit dem resultierenden Array Ihrer $http POST-Anfrage.

Benennen Sie entweder die Funktion oder die Eigenschaft um und binden Sie Ihr ng-repeat an das Array, das es empfängt (und initialisieren Sie es möglicherweise mit einem leeren Array, bis es vom $http Ergebnis ausgefüllt wird).

Etwas wie:

$scope.allNews = []; 

$scope.getAllNews = function() { 
var url = '/data_db.asmx/GetAllNews'; 
var obj = {}; 
    $http.post(url, obj) 
    .success(
    function (response) { 
     if (response.Error) { 
     console.log('Server error'); 
     } 
     else { 
     $scope.allNews = response.d; 
     } 
    }) 
    .error(
    function (response) { 
     console.log('Unkwnow error.'); 
    }); 
} 

versuchen Alternativ ngResource verwenden, erstellen Sie einen Dienst und injizieren, dass in dem Controller. Füllen Sie dann das Array aus, indem Sie auf den Service zugreifen.