AngularJS - Filter not listing empty objects

Question

I have a $scope.myData object which has empty values in message object.

$scope.myData = [
{
   "ID" : "001",
   "deviceName":"sanjit",
   "Message" : "test1"
},{
   "ID" : "002",
   "deviceName":"gan",
   "Message" : "test2"
},{
   "ID" : "003",
   "deviceName":"dine",
   "Message" : ""
},{
   "ID" : "004",
   "deviceName":"sam",
   "Message" : "test4"
},{
   "ID" : "005",
   "deviceName":"dhar",
   "Message" : " "
},{
   "ID" : "006",
   "deviceName":"gau",
   "Message" : "test6"
},{
   "ID" : "007",
   "deviceName":"venk",
   "Message" : "test7"
}
]

I perform dir-paginate in a tr tag like below

<br/><b> dir-paginate="dev in myData | filter:{deviceName:q,message:loc}></b>
<br/>

and using two inputs for filter

<br/>
Device Name: <b>ng-model="q"</b>
<br/>
Message: <b>ng-model="loc"</b>

When I search for a message in the input field with ng-model="loc", I will get the correct result list (001,002,004,006,007)

When I clear the field "loc" I will not get complete results but only the above 5 results (001,002,004,006,007), i.e. after clearing the filter field "loc" , I'm not getting the objects with empty values in message.

Please let me know what is wrong?

CDelaney · Accepted Answer · 2015-08-26 14:28:49Z

1

The filter is case-sensitive so you'll need to change message to Message

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.myData = [
{
   "ID" : "001",
   "deviceName":"sanjit",
   "Message" : "test1"
},{
   "ID" : "002",
   "deviceName":"gan",
   "Message" : "test2"
},{
   "ID" : "003",
   "deviceName":"dine",
   "Message" : ""
},{
   "ID" : "004",
   "deviceName":"sam",
   "Message" : "test4"
},{
   "ID" : "005",
   "deviceName":"dhar",
   "Message" : " "
},{
   "ID" : "006",
   "deviceName":"gau",
   "Message" : "test6"
},{
   "ID" : "007",
   "deviceName":"venk",
   "Message" : "test7"
}
]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<html ng-app="myapp">
  
  <body ng-controller="MainCtrl">
    Device Name: <input ng-model="q">
    Message: <input ng-model="loc">

    <ul>
      <li ng-repeat="dev in myData | filter:{deviceName:q,Message:loc}">
        {{dev}}
      </li>
    </ul>
  </body>
</html>

answered Aug 26, 2015 at 14:28

CDelaney

1,2484 gold badges19 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Suren Over a year ago

Thanks for the reply. I have changed message to Message. I'm using dir-paginate like this <tr dir-paginate="dev in Array.devices | filter:{deviceName:q,Message:loc} not the ng-repeat. Also when filter for a message and removes the letters in the text box for message, i'm not getting all the results, I get only the rows which is having values in Message object.. i.e I'm not getting the complete list event after removing all letters in the filters

Collectives™ on Stack Overflow

AngularJS - Filter not listing empty objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related