CODEWITHSUNDEEP
htmlangularjs
Michele Boscagin
Michele Boscagin

Reputation: 97

AngularJS custom filter for highlight text

I create a filter on a table. Here the 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>

The entry on the table is read from 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.');
    });
}

I'd like to highlight the text that is search in the 1st row of the table. For now, i receive this error:

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

but the filter works.

Upvotes: 0

Views: 346

Answers (1)

Adwaenyth
Adwaenyth

Reputation: 2120

Your problem is that $scope.allNews is a function. When you use it in ng-repeat directive and the directive is evaluated for the first time, your angular will try to examine the allNews property of your $scope as an array.

When the function gets called the first time (which might never happen when angular first encouters the error), it woul overwrite the allNews property with the resulting array of your $http POST request.

Rename either the function or the property and bind your ng-repeat to the array it recieves (and maybe initialize it with an empty array until it is populated by the $http result).

Something like:

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

Alternatively try using ngResource, create a service and inject that into your controller. Then populate the array by accessing the service.

Upvotes: 1

Related Questions