Angular JS - filter text in a table column that contains an array

Question

I'll try to explain my issue with an example:

html code:

<body>
  <input type="search" placeholder="filter by line" ng-model="filter.line">
  <input type="search" placeholder="filter by area" ng-model="filter.area">
  <input type="search" placeholder="filter by text" ng-model="filter.text">
  <div>
    <tbody ng-repeat="document in result.documents | filter:{line:filter.line} |filter:{area:filter.area}">
    <tr>
      <td>{{document.line}}</td>
      <td>{{document.area}}</td>
      <td>{{document.sentences}}</td>
    </tr>
    </tbody>

My Data example:

$scope.result = {
documents: {
            {code:"1",
            line:"line1",
            area:"area1",
            sentences:
             {
                {"aaaaa"},
                {"bbbb"},
                {"ccccc"}
              }
            },
            {code:"2",
            line:"line2",
            area:"area2",
            sentences:
              {
                {"dddd"},
                {"eeee"},
                {"ffff"}
              }
            }

        }};

So what i'm trying to do is to add a filter using the input "filter.text" to filter only in the column "sentences".

something like

filter:{sentences:filter.text}

How i can do it?

result object is just an example. my data are correct, without filter on sentences array all works fine — Luke
– Luke, Commented Dec 14, 2017 at 11:34

user8893882 · Accepted Answer · 2017-12-14 11:48:58Z

1

var myApp = angular.module('myApp', [])
                myApp.controller("userCtrl", function ($scope) {
                $scope.filter_t={};
                $scope.result = {
                        documents:
                                [{"code":0,"line":"line0","area":"aaa0","sentences":{"id":0}},{"code":1,"line":"line1","area":"aaa1","sentences":{"id":1}},{"code":2,"line":"line2","area":"aaa2","sentences":{"id":2}},{"code":3,"line":"line3","area":"aaa3","sentences":{"id":3}},{"code":4,"line":"line4","area":"aaa4","sentences":{"id":4}},{"code":5,"line":"line5","area":"aaa5","sentences":{"id":5}},{"code":6,"line":"line6","area":"aaa6","sentences":{"id":6}},{"code":7,"line":"line7","area":"aaa7","sentences":{"id":7}},{"code":8,"line":"line8","area":"aaa8","sentences":{"id":8}},{"code":9,"line":"line9","area":"aaa9","sentences":{"id":9}}]
                }

    })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <div ng-controller="userCtrl">

       <input type="search" placeholder="filter by line" ng-model="filter_t.line">
  <input type="search" placeholder="filter by area" ng-model="filter_t.area">
  <input type="search" placeholder="filter by sentences inside id based" ng-model="filter_t.sentences.id">
  <div>
<table border='1'>
    <tbody ng-repeat="document in result.documents | filter:filter_t">
    <tr>
      <td>{{document.line}}</td>
      <td>{{document.area}}</td>
      <td>{{document.sentences.id}}</td>
    </tr>
   </tbody>
</table>
</div>

answered Dec 14, 2017 at 11:48

user8893882

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

2 Comments

Luke Over a year ago

In my case i have to filter in all the objects inside sentences. not just one of them :/

Luke Over a year ago

amazing my friend. thank you. i was able to find a solution with your example

Vicky Gill · Accepted Answer · 2017-12-14 11:25:55Z

0

try this Data,

$scope.result = {
documents: {
                {code:"1",
                line:"line1",
                area:"area1",
                sentences:
                 {
                    {"aaaaa"},
                    {"bbbb"},
                    {"ccccc"}
                  }
                },
                {code:"2",
                line:"line2",
                area:"area2",
                sentences:
                  {
                    {"dddd"},
                    {"eeee"},
                    {"ffff"}
                  }
                }

            }
};

answered Dec 14, 2017 at 11:25

Vicky Gill

7341 gold badge7 silver badges22 bronze badges

1 Comment

Luke Over a year ago

probably i write in a wrong way my data example, but isnt my problem. the data are ok

Collectives™ on Stack Overflow

Angular JS - filter text in a table column that contains an array

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related