AngularJSハイライトテキストのカスタムフィルタ

Question

テーブルにフィルタを作成します。ここでは、コード：

<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> 

テーブル上のエントリは、DBから読み込まれます：

$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.'); 
    }); 
} 

私は、テーブルの1行目では、検索されたテキストを強調したいと思います。今のところ、私はこのエラーを受け取ります：

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

しかし、フィルターが動作します。

Answer 1

問題は$scope.allNewsはfunctionです。 ng-repeatディレクティブで使用すると、ディレクティブが最初に評価されると、$scopeのallNewsプロパティが配列として検査されます。

ファンクションが最初に呼び出されると（角度が最初にエラーを引き起こしたときに発生することはありません）、allNewsプロパティを結果の配列$httpのPOSTリクエストで上書きします。

関数またはプロパティの名前を変更し、ng-repeatを受け取った配列にバインドします（$httpの結果が入力されるまで空の配列で初期化します）。以下のような

何か：

$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.'); 
    }); 
} 

また、ngResourceを使用してみてくださいサービスを作成し、コントローラにそれを注入。次に、サービスにアクセスして配列を作成します。