How to filter array on the basis of user input in angularJs

Question

I have an input and a table:-

<label>Label1:</label>
   <input type="text" ng-model="a.value" ng-change ="filterArray(a.value)"/>

<table cellpadding="0" cellspacing="0">
      <thead>
            <tr>
                <th>Branch Code</th>
            </tr>
      </thead>
      <tbody>
            <tr ng-repeat="row in arr track by $index">
                <td>{{row}}</td>
            </tr>
      </tbody>
 </table>

I have an array:- a. arr = [11, 1001, 4300, AA61, 1234, B675]

What I want is when user input 1 then a.arr becomes [11, 1001, AA61, 1234] and it shows in table.

How to achieve this?

You can use ng-if to check if your variable {{row}} contains the input — edkeveked
– edkeveked, Commented Oct 12, 2017 at 11:45
You can also see this link for filters docs.angularjs.org/api/ng/filter/filter — Ankit Pandey
– Ankit Pandey, Commented Oct 12, 2017 at 12:17

Sajeetharan · Accepted Answer · 2017-10-12 11:52:41Z

4

You do not need ng-change here, you can directly use filter,

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function($scope){
   $scope.arr = ['11', '1001', '4300', 'AA61', '1234','B675'];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp" ng-controller="testCtrl">
<label>Label1:</label>
   <input type="text" ng-model="value" />

<table cellpadding="0" cellspacing="0">
      <thead>
            <tr>
                <th>Branch Code</th>
            </tr>
      </thead>
      <tbody>
            <tr ng-repeat="row in arr  | filter:value">
                <td>{{row}}</td>
            </tr>
      </tbody>
 </table>
 </body>

edited Oct 12, 2017 at 11:52

answered Oct 12, 2017 at 11:46

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

Collectives™ on Stack Overflow

How to filter array on the basis of user input in angularJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related