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> 

桌子上的条目从数据库中读取：

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

我想强调的是表的第一行中搜索文本。现在，我收到此错误：

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，创建服务，并注入该到控制器中。然后通过访问服务来填充数组。