AngularJS ng-options to exclude specific object

Question

I'm using angular ng-options to show a with several options as the choices of parent category of the current category, basically these options contain all the existing categories, and I need to exclude the current category from ng-options, which quite make sense because a category cannot be the parent category of itself. So how do I do that? Currently I have the following code:

<tr ng-repeat="category in allCategories">
    <th ng-bind="category.name"></th>
    <th>
        <select ng-options="everyCategory.name for everyCategory in allCategories">
            <option value="">Select parent category</option>
        </select>
    </th>
</tr>

score 31 · Accepted Answer · answered Oct 06 '14 at 11:48

31

You should use filter.

<select ng-options="everyCategory.name for everyCategory in allCategories | filter: { name: '!' + category.name }">...</select>

answered Oct 06 '14 at 11:48

Kamil R

447
5
11

Works like a charm. Thanks, I'm accepting both as the correct answer – dulan Oct 06 '14 at 12:03
I see this has a problem, let's say current category name is 'horse', there is another category named 'white horse', using this filter filters out both these two categories, but what I want is to filter just the current category which is 'horse'. – dulan Oct 17 '14 at 02:06
1

Look at this: http://stackoverflow.com/questions/18242520/exact-filter-in-angular/18243147#18243147 – Kamil R Oct 17 '14 at 11:00

score 2 · Answer 2 · answered Oct 06 '14 at 11:59

2

You could use a filter

<tr ng-repeat="category in allCategories">
  <th>{{category.name}}</th>
  <th>
    <select ng-options="everyCategory.name for everyCategory in allCategories | filter: {name: '!' + category.name}" ng-model="somthing">
      <option value="">Select parent category</option>
    </select>
  </th>
</tr>

I've created a small fiddle with a exmaple of how to use it: http://jsfiddle.net/krausekjaer/tnqrqk2w/3/

answered Oct 06 '14 at 11:59

Krause

43
5

Works like a charm! Thanks, I'm accepting both as the correct answer. – dulan Oct 06 '14 at 12:01

score 0 · Answer 3 · answered Oct 17 '14 at 02:33

Thanks to @Krause and @Kamil R for the answer, yet I found an issue when using their solution, as I've mentioned in previous comments, if there are 2 categories with one name as a substring of another, the filter will cross out both of them. For instance, categories like: candy candybar Using

filter: { name: '!' + category.name }

will filter both of them out, in order to make sure only one gets filtered, I ended up writing a custom filter:

app.filter('parentTaxonomyFilter', function(){
    return function(items, name){
        var arrayToReturn = [];        
        for (var i = 0; i < items.length; i ++){
            if (items[i].name != name) {
                arrayToReturn.push(items[i]);
            }
        }
        return arrayToReturn;
    };
});

and in html, I use the filter like this:

<select class="form-control" ng-init="taxonomy.parentTaxonomy=getParentTaxonomy(taxonomy)" ng-model="taxonomy.parentTaxonomy" ng-options="everyTaxonomy.name for everyTaxonomy in data.allTaxonomies|parentTaxonomyFilter:taxonomy.name">
    <option value="">select parent taxonomy</option>
</select>

score 0 · Answer 4 · answered Sep 23 '15 at 07:09

Try this

<tr ng-repeat="category in allCategories">
  <th>{{category.name}}</th>
  <th>
    <select ng-options="everyCategory.name for everyCategory in allCategories | filter: { name: '!' + category.name }" ng-model="somthing">...</select>
      <option value="">Select parent category</option>
    </select>
  </th>
</tr>

AngularJS ng-options to exclude specific object

4 Answers4

Linked