Filter table after click data AngularJS

Question

I need to filter table - after click name in the list:

 <ul ng-repeat="f in filter">
    <li ng-model="search.name">
        <a class="left-menu-link">
            {{f}}
        </a>
    </li>
</ul>

The table should list only that name which I chose. My plunker: http://plnkr.co/edit/g1t4pludTTIAJYKTToCK?p=preview

// Code goes here

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  $scope.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  $scope.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];





});

<html ng-app="app" ng-cloak>

<head>
  <style>
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none !important;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


  <script src="script.js"></script>


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
    <li ng-model="search.name">
      <a class="left-menu-link">
                            {{f}}
                        </a>
    </li>
  </ul>
  <input ng-model="search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>

      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in data | filter:search">
        <td style="word-break:break-all;">{{n.name}}</td>

        <td>{{n.system}}</td>


      </tr>
    </tbody>
  </table>

</body>

</html>

Thanks for answers in advance!

Check my answer. You were missing to access the name property of search field which you have used in ng-model for the input field. — Ankit Agarwal
– Ankit Agarwal, Commented Aug 30, 2017 at 8:01

kukkuz · Accepted Answer · 2017-08-30 08:03:47Z

You can use an ng-click on your anchor tag in the li using ng-click=onClick(f) like this:

$scope.onClick = function(name) {
    $scope.search = $scope.search || {};
    $scope.search.name = name;
}

See demo below and updated plunker:

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  $scope.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  $scope.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];

  $scope.onClick = function(name) {
    $scope.search = $scope.search || {};
    $scope.search.name = name;
  }
});

<html ng-app="app" ng-cloak>
<head>
  <style>
    [ng\:cloak],
    [ng-cloak],
    [data-ng-cloak],
    [x-ng-cloak],
    .ng-cloak,
    .x-ng-cloak {
      display: none !important;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
    <li>
      <a href="#" class="left-menu-link" ng-click=onClick(f)>{{f}}</a>
    </li>
  </ul>
  <input ng-model="search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in data | filter:search">
        <td style="word-break:break-all;">{{n.name}}</td>
        <td>{{n.system}}</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Ankit Agarwal · Accepted Answer · 2017-08-30 07:58:58Z

Replace this line

<tr ng-repeat="n in data | filter:search">

with

<tr ng-repeat="n in data | filter:search.name">

You are missing the name property of search

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
  
    $scope.data=[
            {
                "name" : "afdfg Nixon",
                "system" : "System Architect"
            },
            {
                "name" : "sdfasdfas",
                "system" : "System Architect"
            },
            {
                "name" : "ggg Nigadfgxon",
                "system" : "System Architect"
            },
            {
                "name" : "Tiger sdd",
                "system" : "System Architect"
            },
            {
                "name" : "aaa Nixon",
                "system" : "System Architect"
            }
        ];
        
        $scope.filter=[
           
                 "afdfg Nixon",
              
                 "sdfasdfas",
           
                 "ggg Nigadfgxon",
           
                 "Tiger sdd",
        
                 "aaa Nixon"
                
        ];
     
    
     

     
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in filter">
                    <li ng-model="search.name">
                        <a class="left-menu-link">
                            {{f}}
                        </a>
                    </li>
                </ul>
  <input ng-model="search.name" />
   <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th >Name
                            <th >System
                            </th>
                        
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="n in data | filter:search.name">
                            <td style ="word-break:break-all;">{{n.name}}</td>
                      
                            <td>{{n.system}}</td>
                          
                
                        </tr>
                        </tbody>
                    </table>
                  
</body>

Hadi · Accepted Answer · 2017-08-30 16:28:01Z

You have used controlerAs syntax in the view but in controller didn't use this variable. so firstly use this instead of $scope in controller.

Other problem is binding ng-model to li tag. you can not do this.So i just use ng-click to set search filter variable with clicke on li.

// Code goes here

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {

  var vm = this;
  vm.data = [{
      "name": "afdfg Nixon",
      "system": "System Architect"
    },
    {
      "name": "sdfasdfas",
      "system": "System Architect"
    },
    {
      "name": "ggg Nigadfgxon",
      "system": "System Architect"
    },
    {
      "name": "Tiger sdd",
      "system": "System Architect"
    },
    {
      "name": "aaa Nixon",
      "system": "System Architect"
    }
  ];

  vm.filter = [

    "afdfg Nixon",

    "sdfasdfas",

    "ggg Nigadfgxon",

    "Tiger sdd",

    "aaa Nixon"

  ];





});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
  <ul ng-repeat="f in vm.filter">
    <li ng-click="vm.search = f">
      <a class="left-menu-link">
                            {{f}}
                        </a>
    </li>
  </ul>
  <input ng-model="vm.search.name" />
  <table class="table table-bordered table-striped">
    <thead>
      <tr>
        <th>Name
          <th>System
          </th>

      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="n in vm.data | filter:vm.search">
        <td style="word-break:break-all;">{{n.name}}</td>

        <td>{{n.system}}</td>


      </tr>
    </tbody>
  </table>

</div>

Collectives™ on Stack Overflow

Filter table after click data AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related