AngularJS custom filter for highlight text

Question

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.

Have no filter code! This is the "magic" D: I use ng-model="inputText" in the input search, and then filter on the ng-repeat with filter : inputText — Michele Boscagin
– Michele Boscagin, Commented Oct 5, 2016 at 7:55
You don't need a filter but directive or component. Filter uses for filtering not for DOM manipulation. — Mosh Feu
– Mosh Feu, Commented Oct 5, 2016 at 7:55
Also, you are using allNews for the array and the method. Change the name of the method. (news in allNews and $scope.allNews = function () { — Mosh Feu
– Mosh Feu, Commented Oct 5, 2016 at 7:59

Adwaenyth · Accepted Answer · 2016-10-05 08:11:48Z

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.

Collectives™ on Stack Overflow

AngularJS custom filter for highlight text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related