I have an ng-repeat that iterates over a document where I want to do a " | filter:search", but want the filter to run on specific fields in the document.
I found a couple examples, that just don't work.
(I have an input field with a model=search)...
The way they say you target specific fields is like this:
<div ng-repeat="x in data | filter({first_name:search,last_name:search })">{{x.first_name}} {{x.last_name}}</div>
I remember doing something in the past and I think this is close, but not quite.
Any help?
<div ng-repeat="obj in objs | filter:filterFn">{{obj.name}}</div>
see this is the function : filterFn
$scope.filterFn = function(elm)
{
if($scope.filterlocation[elm.location])
{
return true;
}
return false;
};
// Code goes here
(function(){
var myApp = angular.module('myApp',['angular.filter']);
myApp.controller('myCtrl', function($scope){
var vm= this;
vm.x = 20;
vm.tableData = [
{
first_name: 'Programmer',
last_name: '21',
},{
first_name: 'Abc',
last_name: 'Xyz'
},{
first_name: 'Kunvar',
last_name: 'Singh'
},{
first_name: 'Cnak',
last_name: '2'
}
];
})
})();
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="angular-filter#0.5.2" data-semver="0.5.2" src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.2/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl as vm">
<input type="text" placeholder="enter your search text" ng-model="vm.searchText" />
<table>
<tr ng-repeat="row in vm.tableData | filterBy: ['first_name','last_name']: vm.searchText">
<td>{{row.first_name}}</td>
<td>{{row.last_name}}</td>
</tr>
</table>
<p>This will show filter from <b>two columns</b> only(first_name and last_name) . Not from all. Whatever columns you add into filter array they
will be searched. all columns will be used by default if you use <b>filter: vm.searchText</b></p>
</body>
</html>
This is an example for a table to search for eachColumn and for all colums in an input all.
Heres the example ->pnlkr
All can be done in the view.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as rchCtrl">
<div>
<label>Search</label>
<input ng-model="searchAll">
<hr>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>AGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input ng-model="searchID">
</td>
<td>
<input ng-model="searchName">
</td>
<td>
<input ng-model="searchAge">
</td>
</tr>
<tr ng-repeat="item in peoples |filter: {id:searchID, name:searchName, age:searchAge} | filter:searchAll">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.peoples = [
{id:1, name:'Kalesi', age:50},
{id:2, name:'Jon', age:43},
{id:3, name:'Jonas', age:34},
{id:4, name:'Sam', age:29},
{id:5, name:'Samuel', age:50},
{id:6, name:'Tyrion', age:20}
];
});
Related
So i have two arrays, One looks a little liek this
$scope.users = {id: 1, email: xxx} {id: 2, email: xxx}....
and i have this one
$scope.booking = {id: 20, regid: 2} ....
So the users is being displayed in a table at the moment.
however if the user has a booking, i want the table row to have a red flag against it (cant share table but its a basic ng-repeat) So if the usersid exists the regid in the booking array, push something to the user
Any help would be wicked
First of All your $scope.users and $scope.booking are objects not arrays...
i make an example how to know if users has book, so heres is the code and the
plnkr
the magic is in the foreach and for loops.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<thead>
<th>ID</th>
<th>NAME</th>
<th>HAS BOOK</th>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hasBook}}</td>
</tr>
</tbody>
</table>
</body>
</html>
CONTROLLER
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.users = [
{id:1, name:'john'},
{id:2, name:'barney'},
{id:3, name:'moroni'},
{id:4, name:'adam'},
{id:5, name:'sam'}
];
$scope.books = [
{id:1, regId:1, name:'book1'},
{id:2, regId:2, name:'book1'},
{id:5, regId:3, name:'book1'},
];
angular.forEach($scope.users, function(value, index){
for(var i =0; i< $scope.books.length; i++){
if(value.id === $scope.books[i].id){
value.hasBook = true;
}
}
});
console.log($scope.users);
});
You can use filters to find if any user with a conrcrete userid is in booking table.
Check this example:
[http://jsbin.com/ewitun/1/edit?html,js,output][1]
i am using angualr nvD3 directory for bullet chart. i want to dispaly the data in the form of bullet chart in a table.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope','$http', function ($scope, $http ) {
$scope.LoadInit = function () {
//alert('1');
$scope.jsondata = [{'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
]
$scope.transactionData= $scope.jsondata;
.finally(function(){
$scope.data1 = {
//"title": "Revenue",
//"subtitle": "US$, in thousands",
"ranges": [0,100,1300],
"measures": [record.actualVolume],
"markers": [record.expectedVolume]
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 1
}
};
};
$scope.LoadInit();
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td><nvd3 options="options1" data="data1"></nvd3></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
but i am not getting the data when i tried to use bullet chart, other wise i am getting data. when i am using http call for data rather than json object, following error is coming.click here for error page
Here is a simplified version of what I think you were trying to achieve. I don't quite get the .finally() function in your code, so what I do instead is map $scope.jsondata to $scope.transactionData, creating a chartData property within each item, so that when you ng-repeat over them, you can feed each of the nvd3 bullet charts its own data object.
I believe the errors you were getting were caused by the fact that you were trying to feed string values of actualVolume and expectedVolume to nvd3, so I fixed that by converting them to Number values instead:
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
See the rest below... Hope this helps you.
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.jsondata = [
{
'transactionName': '1',
'actualVolume':'150',
'expectedVolume':'300'
},
{
'transactionName': '2',
'actualVolume':'250',
'expectedVolume':'300'
}
];
$scope.transactionData = $scope.jsondata.map(function(record) {
return {
transactionName: record.transactionName,
actualVolume: record.actualVolume,
expectedVolume : record.expectedVolume,
chartData: {
ranges: [100, 150, Number(record.expectedVolume)*1.5],
measures: [Number(record.actualVolume)],
markers: [Number(record.expectedVolume)]
}
};
});
$scope.options1 = {
chart: {
type: 'bulletChart',
transitionDuration: 500
}
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Bullet Chart</title>
<link data-require="nvd3#1.8.1" data-semver="1.8.1" rel="stylesheet" href="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.css" />
<script data-require="angular.js#1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script>
<script data-require="d3#3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
<script data-require="nvd3#1.8.1" data-semver="1.8.1" src="https://cdn.rawgit.com/novus/nvd3/v1.8.1/build/nv.d3.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.4/dist/angular-nvd3.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="panel-body" style="margin-top: 10px">
<table class="table text-center">
<thead>
<tr>
<th> tname</th>
<th> volume</th>
<th>graph</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in transactionData">
<td>{{record.transactionName}}</td>
<td>{{record.actualVolume}}</td>
<td class="table-cell-chart">
<nvd3 options="options1" data="record.chartData"></nvd3>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hello all I am new in angularJs. I want to update single row in table instead of whole table after editing it in a form.
Here I am trying to create a table without ng-repeat.
plnkr
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<table>
<tr ng-repeat="info in infos">
<td ng-hide="info.update" ng-bind="info.name"></td>
<td ng-show="info.update">
<input type="text" ng-model="info.name" />
</td>
<td>
<button ng-click="updateMe(info)">click to edit</button>
</td>
</tr>
</table>
<script>
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.infos = [{
name: "user1"
}, {
name: "user2"
}, {
name: "user3"
}, {
name: "user4"
}];
$scope.updateMe = function(object) {
object.update ? object.update = false : object.update = true;
}
})
</script>
</body>
</html>
Final solution..
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title>My ParseApp site</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>
<body>
<form ng-show="update">
user <input type="text" ng-model="upname.name" /> <button ng-click="updateTable(upname)">save</button>
</form>
<table>
<tr ng-repeat="info in infos">
<td ng-bind="info.name"></td>
<td ng-bind="info.lastname" ></td>
<td>
<button ng-click="updateMe(info)">click to edit</button>
</td>
</tr>
</table>
<script>
var app = angular.module('app', []);
app.controller("ctrl", function($scope) {
$scope.infos = [{
name: "user1",id:0,lastname:"abc"
}, {
name: "user2",lastname:"abc",id:1
}, {
name: "user3",lastname:"abc",id:2
}, {
name: "user4",lastname:"abc",id:3
}];
$scope.updateMe = function(object) {
$scope.upname = object;
$scope.update=true;
}
$scope.updateTable = function(object){
}
})
</script>
</body>
</html>
I have an array of objects that I am ng-repeating over. I have a search box to filter results. Each object contains a variety of properties, some of which aren't relevant to the search filter. I'd like to limit the filter to only 2 of the properties. In the example below, I'd like to ignore the 'gender' property and only filter by 'name' or 'phone'.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example52-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body ng-app="">
<div ng-init="friends = [{name:'John', phone:'555-1276', gender: 'male'},
{name:'Mary', phone:'800-BIG-MARY', gender: 'female'},
{name:'Mike', phone:'555-4321', gender: 'male'},
{name:'Adam', phone:'555-5678', gender: 'male'},
{name:'Julie', phone:'555-8765', gender: 'female'},
{name:'Juliette', phone:'555-5678', gender: 'female'}]"></div>
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</body>
</html>
You need a custome filter:-
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th></tr>
<tr ng-repeat="friend in friends | filter:search">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
$scope.search = function (row) {
return (angular.lowercase(row.name).indexOf($scope.searchText || '') !== -1 || angular.lowercase(row.phone).indexOf($scope.searchText || '') !== -1);
};
Plunker
I make a demo of filter.It is working fine.Now I need to make autocomplete with same code or logic .My list is display whole time when I run the project.I need to show list when user enter text in input field.when user remove all text from the input field it hide again list.as same as autocomple or autosuggest in jquery ? can we implement in angular ?
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="cnt">
<input type="text" ng-model="searchText.category">
<table>
<tr ng-repeat= "a in d.obj | filter:searchText">
<td> {{a.name}} </td>
<td> {{a.category}} </td>
</tr>
</table>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.factory('data',function(){
var data={};
data.obj=[
{"name": "Apple", category: "Apple"},
{"name": "bb", category: "Frui"} ,
{"name": "df", category: "Apple"} ,
{"name": "sds", category: "Frui"}
]
return data;
});
function cnt($scope,data){
$scope.d=data;
// alert('-'+$scope.d.obj)
}
</script>
</html>
Thanks
You want to avoid displaying the table something when searchText.category is undefined or empty:
<table ng-show="searchText.category && searchText.category.length != 0">
or
<table ng-if="searchText.category && searchText.category.length != 0">