Angularjs filter not null for an object in Select ng-options:

Question

I am trying to filter out items which are objects & not null in angular 1.5.6.

I tried all options from this post.

Still cannot make it to work.

Only 'Sally' should be shown in the select

Here is the fiddle

HTML :

<div ng-app="myApp" ng-controller="myCtrl">
   <br>

     <select ng-model="a" ng-options="detail.name for detail in details | filter:{shortDescription:'!null'} track by detail.name">
  </select>

    <br>
    New 

     <select ng-model="b" ng-options="detail.name for detail in details | filter:{shortDescription: ''} track by detail.name">
  </select>

    <br>
    All
    <select  ng-model="c" ng-options="detail.name for detail in details | filter:{shortDescription: '!!'} track by detail.name">
  </select>

  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>

Script :

function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];
}

angular.module("myApp",[]).controller("myCtrl", myCtrl);

DAXaholic · Accepted Answer · 2016-07-14 09:19:10Z

2

The problem is that filter:{shortDescription: ''} matches only primitives but not complex objects and shortDescription in your case is a nested object.
Therefore instead use filter:{shortDescription:{$:''}} like so:

  <select ng-model="a" 
          ng-options="detail.name for detail in details | filter:{shortDescription:{$:''}} track by detail.name">
  </select>

answered Jul 14, 2016 at 9:19

DAXaholic

35.9k6 gold badges84 silver badges77 bronze badges

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

Comments

Bowen Li · Accepted Answer · 2016-07-14 09:02:35Z

2

Please run this snippet to achieve your goal

function myCtrl($scope) {
    $scope.details = [{
        name: 'Bill',
        shortDescription: null
    }, {
        name: 'Sally',
        shortDescription: {'MyName':'A girl'}
    }];

}

angular.module("myApp",[]).controller("myCtrl", myCtrl).filter('descFilter',descFilter);

function descFilter(){
	return function(array,key){
  	var newArr = [];
    for(var i = 0; i < array.length; i++){
    	if (array[i][key] != null){
       newArr.push(array[i]);
      }
    }
    return newArr;
  };
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
   <br>
     With Filter:
     <select ng-model="a" ng-options="detail.name for detail in details | descFilter:'shortDescription'">
  </select>
    
  
  <br>
  Without any filter
  <select ng-model="d" ng-options="detail.name for detail in details track by detail.name">
  </select>
  <!-- -->
</div>

answered Jul 14, 2016 at 9:02

Bowen Li

3971 silver badge8 bronze badges

1 Comment

Abdul Rehman Sayed Over a year ago

Thank You. Your answer indeed works. but that would mean creating a new array inside & another filter function. I was looking for something basic like what DAXholic provided.

Ivan Kovachev · Accepted Answer · 2016-07-14 09:14:34Z

1

In ngOptions the not null check is know to not work. Instead you can create a custom filter and use that.

Here is an example with a custom filter function. http://jsfiddle.net/ivankovachev/bue59Loj/

The custom filter function:

$scope.isDescriptionNull = function(item) {
            if (item.shortDescription === null) return false;

          return true;
        }

And how to use it:

<select ng-model="a" ng-options="detail.name for detail in (details | filter:isDescriptionNull) track by detail.name">

answered Jul 14, 2016 at 9:14

Ivan Kovachev

4025 silver badges12 bronze badges

Comments

Mo. · Accepted Answer · 2016-09-23 14:29:26Z

0

You have a little bug in your markup.

The filter expects to get a object property, expression, or comparator.

Official documentation:

{{ filter_expression | filter : expression : comparator : anyPropertyKey}}

So, what you are doing isn't a valid filter

edited Sep 23, 2016 at 14:29

Mo.

27.6k36 gold badges167 silver badges235 bronze badges

answered Jul 14, 2016 at 9:19

Sergio

12 bronze badges

Comments

Imran · Accepted Answer · 2017-12-12 07:32:39Z

0

<select ng-model="a" 
          ng-options="detail.name for detail in details  | filter:{shortDescription:'!!'}} track by detail.name">
  </select>

answered Dec 12, 2017 at 7:32

Imran

2,1191 gold badge12 silver badges8 bronze badges

Collectives™ on Stack Overflow

Angularjs filter not null for an object in Select ng-options:

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related