Here is a plunker I made. Whats the best approach to merge $scope.blacklistinto $scope.friends when ng-click="showColumn('Blacklist');" is fired, finally a new column called Coming need to be added to the table.
ng-app & ng-controller
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', MainCtrl]);
function MainCtrl($scope, $http) {
$scope.friends = [{name:'John', phone:'555-1276'},
{name:'Mary', phone:'800-BIG-MARY'},
{name:'Mike', phone:'555-4321'},
{name:'Adam', phone:'555-5678'},
{name:'Julie', phone:'555-8765'}];
$scope.coming = [{coming: 'x'},
{coming: 'x'},
{coming: 'x'},
{coming: 'x'},
{coming: 'x'}];
$scope.showColumn = function (type) {
if (type === 'coming') {
// INSERT Code here
console.log('Try add column coming');
}
}
$scope.getFilter = function () {
return $scope.filter;
};
$scope.setFilter = function (filter) {
$scope.filter = filter;
};
}
View
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<hr />
<a ng-click="showColumn('coming');">Show "coming"</a>
<hr />
<table class="table">
<tbody>
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:getFilter()">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Try
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', MainCtrl]);
function MainCtrl($scope, $http) {
$scope.friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}];
$scope.coming = [{
coming: 'x'
}, {
coming: 'x'
}, {
coming: 'x'
}, {
coming: 'x'
}, {
coming: 'x'
}];
$scope.showColumn = function(type) {
if (type === 'coming') {
$scope.showComing = true;
angular.forEach($scope.friends, function(obj, i) {
obj.coming = ($scope.coming[i] || {}).coming;
})
}
}
$scope.getFilter = function() {
return $scope.filter;
};
$scope.setFilter = function(filter) {
$scope.filter = filter;
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<hr />
<a ng-click="showColumn('coming');">Show "coming"</a>
<hr />
<table class="table">
<tbody>
<tr>
<th>Name</th>
<th>Phone</th>
<th ng-show="showComing">Coming</th>
</tr>
<tr ng-repeat="friend in friends | filter:getFilter()">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td ng-show="showComing">{{friend.coming}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I have 2 javascript files, one used as a controller and second as service. When I am injecting service into controller and access it's function, it says
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
var convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return { convertToLocalCurrency };
});
var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$scope.localCurrency = function(amount, currencyConverter) {
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}
$scope.Products = [
{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
];
$scope.Countries = [
{name: 'India', currency: 'INR', currencySymbol: '₹'},
{name: 'United States', currency: 'USD', currencySymbol: '$'},
{name: 'England', currency: 'GBP', currencySymbol: '£'}
];
$scope.getCartValue = function () {
var total = 0;
for (var i = 0; i < $scope.Products.length; i++) {
total = $scope.Products[i].price * $scope.Products[i].quantity;
}
return total;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="cartModule" ng-controller="cartController">
<table ng-hide="SelectedCountry == '0'">
<tr>
<th>Product</th>
<th>Price Per Unit</th>
<th> Quantity</th>
<th>Total Price</th>
</tr>
<tr ng-repeat="product in Products">
<td ng-bind="product.name">
</td>
<td ng-bind="product.price | currency : '₹'"></td>
<td>
<input type="number" ng-model="product.quantity" min="0" max="100">
</td>
<td ng-bind="product.price * product.quantity | currency : '₹'"></td>
</tr>
<tr>
<th colspan="3">Total</th>
<th ng-bind="getCartValue() | currency : '₹'"></th>
</tr>
</table>
<select ng-model="SelectedCountry">
<option value="0">Select your country</option>
<option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"></option>
</select>
</div>
</body>
TypeError: Cannot read property 'methodName' of undefined
Service
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
var convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return { convertToLocalCurrency };
});
and Controller
var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['currencyConverter', function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$scope.localCurrency = function(amount, currencyConverter) {
currencyConverter.convert(amount, $scope.SelectedCountry); //Error here
}
$scope.Products = [
{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
];
$scope.Countries = [
{name: 'India', currency: 'INR', currencySymbol: '₹'},
{name: 'United States', currency: 'USD', currencySymbol: '$'},
{name: 'England', currency: 'GBP', currencySymbol: '£'}
];
$scope.getCartValue = function () {
var total = 0;
for (var i = 0; i < $scope.Products.length; i++) {
total = $scope.Products[i].price * $scope.Products[i].quantity;
}
return total;
}
}]);
I have tried adding both files in different order in view but that couldn't solve the problem. What I am doing wrong here?
I am referencing 3 js files in HTML as below
<script src="../Script/angular.js"></script>
<script src="../Services/currencyConverter.js"></script>
<script src="../Script/cartController.js"></script>
You have missed to inject $scope,
app.controller('cartController', ['$scope','currencyConverter', function ($scope, currencyConverter)
and the method name is convertToLocalCurrency not just convert
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
EDIT
You're getting undefined because your function parameter name is also currencyConverter , you need to change it to something else or remove it completely since you are not using,
$scope.localCurrency = function(amount, currency) {
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}
WORKING DEMO
Also i modified your service a bit to return the factory with the methods as
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var dataFactory={};
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
dataFactory.convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return dataFactory ;
});
The $scope.localCurrency function erroneously has two parameters:
app.controller('cartController', ['$scope', 'currencyConverter',
function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$̶s̶c̶o̶p̶e̶.̶l̶o̶c̶a̶l̶C̶u̶r̶r̶e̶n̶c̶y̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶a̶m̶o̶u̶n̶t̶,̶ ̶c̶u̶r̶r̶e̶n̶c̶y̶C̶o̶n̶v̶e̶r̶t̶e̶r̶)̶ ̶{
$scope.localCurrency = function(amount) {
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}
The currencyConverter factory is injected in controller construction function, not in the local scope function.
The DEMO
var app = angular.module('currencyConverterModule', []);
app.factory('currencyConverter', function() {
var localToINR = [
{USD: 0.015},
{GBP: 0.011}
];
var convertToLocalCurrency = function (amount, localCurrency) {
return amount * localToINR[localCurrency];
}
return { convertToLocalCurrency };
});
var app = angular.module('cartModule', ['currencyConverterModule']);
app.controller('cartController', ['$scope', 'currencyConverter', function ($scope, currencyConverter){
$scope.SelectedCountry = '0';
$scope.localCurrency = function(amount) {
currencyConverter.convertToLocalCurrency(amount, $scope.SelectedCountry);
}
$scope.Products = [
{name: 'TV', price: $scope.localCurrency(30000), quantity: 1},
{name: 'Fridge', price: $scope.localCurrency(35000), quantity: 1},
{name: 'AC', price: $scope.localCurrency(40000), quantity: 1}
];
$scope.Countries = [
{name: 'India', currency: 'INR', currencySymbol: '₹'},
{name: 'United States', currency: 'USD', currencySymbol: '$'},
{name: 'England', currency: 'GBP', currencySymbol: '£'}
];
$scope.getCartValue = function () {
var total = 0;
for (var i = 0; i < $scope.Products.length; i++) {
total = $scope.Products[i].price * $scope.Products[i].quantity;
}
return total;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="cartModule" ng-controller="cartController">
<table ng-hide="SelectedCountry == '0'">
<tr>
<th>Product</th>
<th>Price Per Unit</th>
<th> Quantity</th>
<th>Total Price</th>
</tr>
<tr ng-repeat="product in Products">
<td ng-bind="product.name">
</td>
<td ng-bind="product.price | currency : '₹'"></td>
<td>
<input type="number" ng-model="product.quantity" min="0" max="100">
</td>
<td ng-bind="product.price * product.quantity | currency : '₹'"></td>
</tr>
<tr>
<th colspan="3">Total</th>
<th ng-bind="getCartValue() | currency : '₹'"></th>
</tr>
</table>
<select ng-model="SelectedCountry">
<option value="0">Select your country</option>
<option ng-repeat="country in Countries" ng-value="country.name" ng-bind="country.name"></option>
</select>
</div>
</body>
I have an array that looks like this:
0: {ID: null,
name: "test",
city: "Austin",
UserColors: [{color: "blue"},{hobby:"beach"} ... ]}
}...
I am trying to ng-repeat through the initial array but once I try to loop through the list, i see nothing, heres the html/angular
<tr ng-repeat="c in vm.people">
<td>{{c.name}}</td>
<td>{{c.city}}</td>
<td ng-repeat="uc in c.UserColors">
<td>{{uc.color}}</td>
</td>
</tr>
I am not sure what is wrong, and I would appreciate your help, I thank you in advance.
I would process the field with a custom filter:
<td ng-repeat-start="(key, value) in c.UserColors | reduce">
<b>{{key}}</b>
</td>
<td ng-repeat-end>
{{value}}
</td>
The filter:
app.filter("reduce",function() {
return function(items) {
var x = items.map(o => Object.entries(o));
var x2 = x.reduce(((a,x) => (a.concat(x))), []);
var x3 = x2.reduce(((o,x) => (o[x[0]]=x[1],o)), {});
return x3;
}
})
The DEMO
angular.module("app",[])
.controller("ctrl",function(){
var vm = this;
vm.people = {
0: {ID: null,
name: "test",
city: "Austin",
UserColors: [{color: "blue"},{hobby:"beach"}]
},
1: {ID: null,
name: "best",
city: "Boston",
UserColors: [{colorx: "red"},{shirt:"black"}]
},
2: {ID: null,
name: "rest",
city: "Paris",
UserColors: [{colory: "yel"},{fruit:"peach"}]
},
}
})
.filter("reduce",function() {
return function(items) {
var x = items.map(o => Object.entries(o));
var x2 = x.reduce(((a,x) => (a.concat(x))), []);
var x3 = x2.reduce(((o,x) => (o[x[0]]=x[1],o)), {});
return x3;//items;
}
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl as vm">
<h3>Table</h3>
<table>
<tr ng-repeat="c in vm.people">
<td>{{c.name}}</td>
<td>{{c.city}}</td>
<td ng-repeat-start="(key, value) in c.UserColors | reduce">
<b>{{key}}</b>
</td>
<td ng-repeat-end>
{{value}}
</td>
</tr>
</table>
</body>
I have list of objs:
[{
key:test1
name: name1
},
{
key:test1
name: name2
},
{
key:test2
name: name3
}]
And i use ng-repeat to display it:
<tr ng-repeat=item in list>
<td>{{item.key}}</td>
<td>{{item.name}}</td>
</tr>
Is it possible to combine values with similar keys without changing the structure? not to be displayed twice test1 in my case
now:
test1 : name1
test1 : name2
test2 : name3
desired result:
test1 : name1
_____ name2
test2 : name3
You can use groupBy filter:
angular.module('app', ['angular.filter']).controller('ctrl', function($scope){
$scope.list = [{
key:'test1',
name: 'name1'
}, {
key:'test1',
name: 'name2'
},{
key:'test1',
name: 'name3'
},{
key:'test2',
name: 'name4'
}];
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>
<table ng-app='app' ng-controller='ctrl'>
<tbody>
<tr ng-repeat-start="(key, value) in list | groupBy: 'key'">
<td>{{key}}</td>
<td>{{value[0].name}}</td>
</tr>
<tr ng-repeat-end ng-repeat='item in value.splice(1)'>
<td></td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
ng-repeat="item in list | unique:'key'"
Here is how you can achieve the common key value in a same place using angular-filter:
angular.module('app',['angular.filter']).controller('mainCtrl', function($scope){$scope.list = [{
key:'test1',
name: 'name1'
},
{
key:'test1',
name: 'name2'
},
{
key:'test2',
name: 'name3'
}]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>
<div ng-app='app' ng-controller='mainCtrl'>
<div ng-repeat="(key, value) in list | groupBy: 'key'">
<span ng-repeat='val in value'>{{val.name}} </span>
</div>
</div>
Before using ng-repeat update the list.
function rd(o, k, v) {
var n = [];
var l = {};
for(var i in o) {
if (l.hasOwnProperty(o[i][k])){
o[i][v] = l[o[i][k]][v]+ " " + o[i][k]
l[o[i][k]] = o[i]
} else{
l[o[i][k]] = o[i];
}
}
for(i in l) {
n.push(l[i]);
}
return n;
}
var list = rd(arr, "key", "name");
You can try this:
var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', function($scope) {
$scope.items = [{
"key":"test1",
"name": "name1"
},
{
"key":"test1",
"name": "name2"
},
{
"key":"test2",
"name": "name3"
}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in items | groupBy: 'key'">
<h3>Key : {{item[0].key}}</h3>
<p>Names : <span ng-repeat='i in item'>{{i.name}} </span></p>
</div>
</div>
I am new to AngularJS, and I am trying to use ui-route.
I made a customer table that when you click on customer cart you can see the details of her/his shopping. CustomerId is supposed to pass as a parameter to the state.
<a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a>
but I receive an error of
Could not resolve 'order1' from state 'home'
Here is codes: customers.html
<!-- views/customers.html -->
<div class="container">
<div class="row" ng-cloack>
<h2>Customers</h2>
<br>
<form>
<div class="form-group">
<label>Filter</label>
<input type="text" class="form-control" data-ng-model="customerFilter.name">
</div>
</form>
<br>
<table class="table table-striped table-hover table-responsive">
<tr>
<th>#</th>
<th ng-click="doSort('name')">Name</th>
<th ng-click="doSort('city')">City</th>
<th ng-click="doSort('orderTotal')">Order Total</th>
<th ng-click="doSort('joined')">Joined</th>
<th>View Order</th>
</tr>
<tr ng-repeat="cust in customers | filter:customerFilter | orderBy:sortBy:reverse">
<td>{{$index + 1 }}</td>
<td>{{cust.name | uppercase}}</td>
<td>{{cust.city}}</td>
<td>{{cust.orderTotal | currency}}</td>
<td>{{cust.joined | date}}</td>
<td><a ui-sref="order{{ cust.id }}" class="color-violet"><i class="fa fa-shopping-cart"></i></a></td>
</tr>
</table>
<span>Total customers: {{ customers.length}}</span>
</div>
orders.html
<!-- views/orders.html -->
<div class="container">
<div class="row" ng-cloack>
<h2>Orders</h2>
<br>
<table class="table table-striped table-hover table-responsive">
<tr>
<th>#</th>
<th>Product</th>
<th >Total</th>
</tr>
<tr ng-repeat="order in orders">
<td>{{$index + 1 }}</td>
<td>{{order.product}}</td>
<td>{{order.total | currency}}</td>
</tr>
</table>
</div>
app.js
(function() {
var app = angular.module('customersApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("index.html")
$stateProvider
.state('home',
{
url:'/',
controller:'CustomersController',
templateUrl:'views/customers.html'
})
.state('order',{
url:'/order/:customerId',
controller: 'OrdersController',
templateUrl:'views/orders.html'
});
});
}());
and the controller of customer
(function() {
var CustomersController = function ($scope) {
$scope.sortBy = 'name';
$scope.reverse = false;
$scope.customers = [
{id:1, joined: '2000-12-02', name:'Ali', city:'Montreal', orderTotal: 9.9956, orders: [ {id: 1, product:'Shoes', total: 9.9956}]},
{id:2, joined: '1965-01-25',name:'Zoe', city:'Montreal', orderTotal: 19.99, orders: [{id: 2, product:'Baseball', total: 9.995}, {id: 3, product:'Bat', total: 9.9956}]},
{id:3, joined: '1944-06-15',name:'Tina', city:'Toronto', orderTotal:44.99, orders: [{id: 4, product: 'Headphones', total: 44.99}]},
{id:4, joined: '1995-03-28',name:'Azad', city:'Vancouver', orderTotal:101.50, orders: [{id: 5, product: 'Kindle', total: 101.50}]}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
};
CustomersController.$inject = ['$scope'];
angular.module('customersApp')
.controller('CustomersController', CustomersController);
}());
and ordercontroller.js
(function() {
var OrdersController = function ($scope, $stateParams) {
// $routeParams.customerId comes from routing configuration customerId after PATH
var customerId = $stateParams.customerId;
$scope.orders = null;
function init() {
//Search the customers for the customerId
for (var i=0,len=$scope.customers.length;i<len;i++) {
if ($scope.customers[i].id === parseInt(customerId)) {
$scope.orders = $scope.customers[i].orders;
break;
}
}
}
$scope.customers = [
{id:1, joined: '2000-12-02', name:'Ali', city:'Montreal', orderTotal: 9.9956, orders: [ {id: 1, product:'Shoes', total: 9.9956}]},
{id:2, joined: '1965-01-25',name:'Zoe', city:'Montreal', orderTotal: 19.99, orders: [{id: 2, product:'Baseball', total: 9.995}, {id: 3, product:'Bat', total: 9.9956}]},
{id:3, joined: '1944-06-15',name:'Tina', city:'Toronto', orderTotal:44.99, orders: [{id: 4, product: 'Headphones', total: 44.99}]},
{id:4, joined: '1995-03-28',name:'Azad', city:'Vancouver', orderTotal:101.50, orders: [{id: 5, product: 'Kindle', total: 101.50}]}
];
$scope.doSort = function(propName) {
$scope.sortBy = propName;
$scope.reverse = !$scope.reverse;
};
init();
};
OrdersController.$inject = ['$scope', '$routeParams'];
angular.module('customersApp')
.controller('OrdersController', OrdersController);
}());
Everything looks fine, but I can realize where is this error coming from.
Thanks
You have to define which parameter you wish to use in the state (order). To do so treat the state like a function, and add all params as an object:
<a ui-sref="order({ customerId: cust.id })" class="color-violet"><i class="fa fa-shopping-cart"></i></a>
I am trying to create a general table using element type custom directive that takes collection of data and generates the table header and create all the rows and columns of the table, then i tried to sort all the columns. The part of this code is working fine. But my next goal is to apply the filter on all the columns of the table, as the data is dynamic so we cannot decide about the field to filter at run time. The problem I diagnosed is that I am using ng-repeat="row in customers|filter:{$scope.searchkey:$scope.search}". Here seems to be the problem because in then expression the first thing should be object but $scope returns object.
Following is my code.
Index.html
<body>
<div>
<my-table input="Customers"></my-table>
<br />
<br />
<br />
<my-table input="Users"></my-table>
</div>
</body>
script.js
angular.module('DirectiveDemo', [])
.controller('Controller', ['$scope', function ($scope) {
$scope.Customers = [{ Name: "2Touqeer", Code: "2" },
{ Name: "3Nadeem", Code: "3" },
{ Name: "1Talha", Code: "1" },
{ Name: "4Muslim Khan", Code: "4" }
];
$scope.Users = [{ Name: "Touqeer", Code: "2", ID: "2Touqeer", CID: "CID1" },
{ Name: "Nadeem", Code: "3", ID: "3Muslim", CID: "CID3" },
{ Name: "Talha", Code: "1", ID: "1Nadeem", CID: "CID2" },
{ Name: "Muslim Khan", Code: "4", ID: "1Talha", CID: "CID5" },
{ Name: "Khan", Code: "4", ID: "1Khan", CID: "CID78" }
];
}])
.directive('myTable', function () {
return {
restrict: 'E',
transclude: true,
scope: {
customerInfo: '=input'
},
templateUrl: 'my-table-info.html',
controller: function ($scope) {
$scope.searchKey = 'CID';
alert($scope.searchKey)
$scope.reverseSort = false;
$scope.search = '';
$scope.List = [];
$scope.order = function (item) {
$scope.orderByField = item;
alert($scope.search)
}
$scope.filterValue = function (itemKey,valueKey) {
$scope.searchKey = itemKey;
if (valueKey != 'undefined') {
$scope.search = valueKey;
alert($scope.search)
}
}
}
};
})
my-table-info.html
<table ng-transclude>
<thead class="GridHeaderItem ControlBorder">
<tr>
<th ng-repeat="(key, value) in customerInfo[0]"> <a href="#" ng-click="order(key); reverseSort = !reverseSort">
{{key}}
<span ng-show="orderByField==key">
<span ng-show="!reverseSort">
<i class="glyphicon-circle-arrow-up glyphicon"></i>
</span>
<span ng-show="reverseSort">
<i class="glyphicon-circle-arrow-down glyphicon"></i>
</span></span>
</a></th>
</tr>
<tr class="ControlBorderRight ControlBorderTop ControlBorderBottom">
<td class=" ControlBorderLeft ControlBorderBottom" ng-repeat="(key, value) in customerInfo[0]" >
<input type="text" style="width:100%;" ng-model="searchfilter" ng-change="filterValue(key,searchfilter);" />
<!--ng-change="filter(key);"-->
</td>
</tr>
</thead>
<tr ng-repeat="row in customerInfo|filter:{co[row]:2}|orderBy:orderByField:reverseSort" class="ControlBorderRight ControlBorderTop ControlBorderBottom ">
<td ng-repeat="col in row" class=" ControlBorderBottom ControlBorderLeft Control LabelControl">{{col}}</td>
</tr>
</table>
You should build a custom filter function angular.module('myMod',[]).filter('myFilter',function(){ return function(input){...} }) then your repeat should look like this: ng-repeat="row in customers | myFilter" - the row object will be fed to the filter function as the input parameter.