Angularjs - filter object by search value, but don't omit if the search value is in the second object

Question

Having trouble even writing the subject with my lack of english. So here I go, I have for example two objects connected by the colorid:

   $scope.fruits = {{name:"apple",colorid:"1"},etc};
   $scope.colors = {{id:"1",value:"red"};

I've built a nice table with search and filter, using ng-repeat

   ng-repeat="fruit in fruits | orderBy:sortType:sortReverse | filter:search"

What I am trying to achieve is ... when i search/filter for "red", to still view "apple"..

Edit: Obviously there is no connection in the ng-repeat with the second object "colors", the simplest solution would be to iterate each "fruit" and .push its color value (red) in the "fruits" object itself, so when searched/filtered for "red", the "apple" object is still visible in the search table. But I assumed there may be some "angular-ish" solution for connected tables and their relationship ids.

I don't see what this has to do with your `colors` object since it isn't used in your `ng-repeat`. You probably should update your question with an [mcve] to help demonstrate your problem. — Matthew Green, Aug 03 '16 at 21:45
exactly, how can I use the colors object in my ng-repeat along with the fruits object ? — ion, Aug 03 '16 at 21:55

developer033 · Answer 1 · 2016-08-04T02:27:34.830

0

If I understood well you are trying to "connect" your arrays. So you can have nested ngRepeat, as below:

(function() {
  "use strict";

  angular
    .module('app', [])
    .controller('MainCtrl', MainCtrl);

  MainCtrl.$inject = ['$scope'];

  function MainCtrl($scope) {
    $scope.fruits = [  
       {  
          "name":"apple",
          "colorid":1
       },
       {  
          "name":"mango",
          "colorid":2
       },
       {  
          "name":"papaya",
          "colorid":3
       }
    ];
    
    $scope.colors = [  
       {  
          "id":"1",
          "value":"red"
       },
       {  
          "id":2,
          "value":"green"
       },
       {  
          "id":3,
          "value":"yellow"
       }
    ];
  }
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="MainCtrl">
  <input type="text" class="form-control" ng-model="search" placeholder="Search...">
  <ul ng-repeat="fruit in fruits track by $index">
    <li ng-if="filtered.length" ng-bind="fruit.name"></li>
    <ul>
      <li ng-repeat="color in colors | filter: { id: fruit.colorid } | filter: search as filtered track by $index" ng-bind="color.value">
      </li>
    </ul>
  </ul>
</body>

</html>

edited Aug 04 '16 at 02:27

answered Aug 03 '16 at 22:26

developer033

24,267
8
82
108

thanks for your efforts but no, I'm trying to do a multiple search filter, found something here http://stackoverflow.com/questions/13216115/filtering-by-multiple-specific-model-properties-in-angularjs-in-or-relationship – ion Aug 03 '16 at 22:36
Well, how are you trying to perform a multiple search filter if you even don't have a nested ngRepeat? – developer033 Aug 03 '16 at 22:38
Searching for "red" would remove the "apple" from view as it doesn't contain "red", corect ? I need something to search for apple's colorid in the colors object, and leave the apple unfiltered if the color value contains "red" – ion Aug 03 '16 at 22:42
The problem is that before think in any filter you MUST nest your ngRepeat's. – developer033 Aug 03 '16 at 22:43
OK, seems to work fine, except I do not wish for mango or papaya to appear in the list if they don't contain the "search.. red" – ion Aug 04 '16 at 01:35
Sorry to be a pain, but the logic i'm after is to search for either apple or red, and see the same object. "red" is only a property of apple, but can also be a property of another fruit. So if i type red, I want all fruits with colorid of 1 (red) to show up. – ion Aug 04 '16 at 01:57
Well, it's a bit strange for me now.. It's working the way that you said above. If you type `red` it will show all fruits with the red color.. – developer033 Aug 04 '16 at 02:01
Fruits is the main object, colors is the secondary, search will first look in fruits, and after that in colors using the fruit.colorid, if true then the fruit remains on the board. Something like a custom filter ? .. – ion Aug 04 '16 at 02:24
What you're trying to achieve is completely strange. You want to have a *single* field to search in both arrays.. imagine if I have a color called `apple` what are you expecting??? – developer033 Aug 04 '16 at 02:37
Exactly, I am searching in both arrays, if I had a color called "apple" it will show up with the matching fruit. My only solution so far was to join the arrays in one. – ion Aug 04 '16 at 09:46

Angularjs - filter object by search value, but don't omit if the search value is in the second object

1 Answers1