CODEWITHSUNDEEP
javascripthtmlangularjs
Daniel
Daniel

Reputation: 11182

Filter on a single column value using AngularJS

I've created an AngularJS application with a input for filtering the <tbody>'s <tr>.

Right now my table is filtering on both Country and City - I want it to only filter on Country. I've tried a lot of variations of filter:{Country: Search} but it doesn't seem to be working.

Thanks to user edisoni.1337 I have an updated working example using AngularJS 1.2.1 (the one seen below).

var app = angular.module('myApp', []);
app.controller('callCtrl', function($scope)
{
	$scope.stuff = [{"House": {"Country": "Denmark", "City": "Copenhagen"}}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="callCtrl">
<input type="text" ng-model="Search">
<table>
<thead>
  <tr>
    <th>Country</th>
    <th>City</th>
  </tr>
</thead>
<tbody>
  <tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
    <td>{{x.House.Country}}</td>
    <td>{{x.House.City}}</td>
  </tr>
</tbody>
</table>
</div>

CDN for 1.5.6:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

Upvotes: 0

Views: 2031

Answers (2)

Suman
Suman

Reputation: 43

This works on 1.5.6 with few changes on the code above: http://jsbin.com/zuxokuy/edit?html,js,output

Upvotes: 1

Edison Biba
Edison Biba

Reputation: 4443

Here you have a working jsfiddle

<tr ng-repeat="x in stuff | filter : {'House.Country' : Search}">
    <td>{{x.House.Country}}</td>
    <td>{{x.House.City}}</td>
 </tr>

Also read this article for better understand http://www.w3schools.com/angular/ng_filter_filter.asp

Upvotes: 1

Related Questions