I am trying to explore the AngularJS filter but the code which I am trying is not working.
JSFiddle for the same is: http://jsfiddle.net/sajesh1985/5bp5v1z0/1/
<td><input type="text" ng-model="search.Name"/></td>
<tbody ng-repeat="item in items ">
<tr ng-repeat="temp in item | filter:search">
<td>{{temp[0].Name}}</td>
<td>{{temp[0].Price}}</td>
<td>{{temp[0].Quantity}}</td>
</tr>
</tbody>
I think that your items object is not constructed very well and I think it should be smth like this
$scope.items = [
{
Name: "Account Opening R75",
Price: "R75",
Quantity: "A_O-AngularJS"
}
,
{
Name: "AVClientService",
Price: "R74",
Quantity: "AVClientService-DotNet"
}
];
Also, I modified your code snnipet like this:
<tr ng-repeat="item in items | filter:search">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
For the complete example check this jsfiddle
http://jsfiddle.net/5bp5v1z0/3/
Hope it helps!
Related
I recently started learning angular js. I have following object ResultRow:
ResultRow = function ( cars, prices) { //cars and prices are arrays
this.prices = prices;
this.cars = cars;
};
for example,
ResultsRow=new ResultsRow(["Ford","Honda","Nissan"],[20,22,18]);
I want to display the ResultsRow in table as:
Car Price
Ford 20
Honda 22
Nissan 18
So basically print car[0],price[0] in one table row, car[1], price[1] in next table row and so on.
I tried following using ng-repeat:
<tr>
<td ng-repeat="car in ctrl.ResultsRow.cars">
{{car}}
</td>
<td ng-repeat="car in ctrl.ResultsRow.prices">
{{price}}
</td>
</tr>
I am having a hard time figuring out how to display the exact format that I want. Any help will be appreciated.
P.S. It is quite complicated for me to change the format of ResultRow as I am generating it after quite a few data operations.
You should make an array of objects with properties to iterate in stead of trying to simultaneously iterate two separate arrays.
Example:
var row1 = {
car: "Ford",
price: 20
};
var row2 = {
car: "Honda",
price: 22
};
$scope.rows = [row1, row2];
Then in the template:
<tr ng-repeat="row in rows">
<td>{{row.car}}</td>
<td>{{row.price}}</td>
</tr>
if you want to use a multi-dimension array then I would suggest use new Array and if your car array and price array content is in order then you could do something like this;
vm.ResultsRow=new Array(["Ford","Honda","Nissan"],[20,22,18]);
<tr ng-repeat="car in vm.ResultsRow[0]">
<td>
{{car}}
</td>
<td>
{{vm.ResultsRow[1][$index]}}
</td>
</tr>
angular.module("app",[])
.controller("ctrl",function($scope){
var vm = this;
vm.ResultsRow=new Array(["Ford","Honda","Nissan"],[20,22,18]);
console.log(vm.ResultsRow)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
<table>
<tr ng-repeat="car in vm.ResultsRow[0]">
<td>
{{car}}
</td>
<td>
{{vm.ResultsRow[1][$index]}}
</td>
</tr>
</table>
</div>
change the function for mapping data, like this :
var repeatObject = new Array();
ResultRow = function ( cars, prices) { //cars and prices are arrays
if(cars.length == prices.length) {
for(let i in cars){
this.repeatObject.push({'cars' : cars[i], 'prices' : prices[i]});
}
}
};
So you can use 'ng-repeat' :
<tr ng-repeat="row in repeatObject">
<td>{{row.car}}</td>
<td>{{row.price}}</td>
</tr>
So far I've only found examples that put the objects in the rows (1)(2)(3), but I need to put the objects in the columns and their attributes in the rows.
Example of JSON:
[
{
name: 'peanut butter',
price: 0.99
}
{
name: 'strawberry jelly',
price: 0.99
}
{
name: 'white bread',
price: 2.99
}
]
Example of desired table:
I think you want something like this.
Angular template:
<table>
<tr>
<th>Name</th>
<th ng-repeat="item in yourList">{{ item.name }}</th>
</tr>
<tr>
<td>Price</td>
<td ng-repeat="item in yourList">{{ item.price }}</td>
</tr>
</table>
I have a table and I need to display values in table from my JSON response. But I am unable to fetch the datas inside array.somewhere I am missing something.
JSON:
var jobs = [
{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},
{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}
]
HTML:
<tr ng-repeat ="item in jobs">
<td>{{item.jobs.title}}</td>
<td>{{item.jobs.description}}</td>
</tr>
You need to use $scope:
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Hope it helps =)
There are two issues,
(i)You need to use $scope variable
(ii)You need to access item.title not item.jobs.title inside ng-repeat
You should access item
<tr ng-repeat="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
DEMO
The jobs array needs to be in $scope.
$scope.jobs = [{"id":1,"title":"Need comedian","company":"AMS","description":"Need comedian"},{"id":2,"title":"Need Actor","company":"ERS","description":"Actor for Romantic Movie"}]
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
Keep these things in mind while playing with ng-repeat :
You have to use $scope.jobs object instead of var jobs as an array declaration in the controller which you are going to pass in ng-repeat for binding.
When you are going to iterate the array inside ng-repeat="item in jobs" no need to use again jobs to access the property of the objects(item) of an array(jobs).
Working Demo :
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.jobs = [
{
"id":1,
"title":"Need comedian",
"company":"AMS",
"description":"Need comedian"
},
{
"id":2,
"title":"Need Actor",
"company":"ERS",
"description":"Actor for Romantic Movie"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<table>
<tr ng-repeat ="item in jobs">
<td>{{item.title}}</td>
<td>{{item.description}}</td>
</tr>
</table>
</div>
I'm starting AngularJS. I'm dynamically building a table with angular and I'm trying to add a filter to one of my columns.
Here the code I have in my controller :
$scope.columns = [
{
"alias":"alias1",
"name":"name1",
"type":"string"
},
{
"alias":"alias2",
"name":"name2",
"type":"currency"
}
];
$scope.data = [
{
"alias1": "value1",
"alias2": "22489"
},
{
"alias1": "value2",
"alias2": "22489"
},
{
"alias1": "value3",
"alias2": "22489"
},
];
And my table looks like this :
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="c in columns" ng-click="sort(c.alias)">{{ c.name }}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in results | filter:search | orderBy:sortKey:reverse">
<td ng-repeat="c in columns">{{ result[c.alias] }}</td>
</tr>
</tbody>
</table>
What I'd like to do is to apply a filter to the <td> value based on the type of the column. Something like {{ result[c.alias] | c.type }} doesn't work...
Is it something that can be achieved by some formatting directive for example ?
Thanks for you help.
You mean this?:
app.filter('myfilter', function() {
return function(input, param) {
//do whatever
}
})
{{ result[c.alias] | myfilter:c.type }}
I'm trying to create a nested ng-repeat loop. It uses the groupBy and toArray filters from angular-filter.
The issue is that I have an editable input field in the nested array. Without implementing "track by" on the ng-repeats every time the value changes when typed it looses focus as described in this issue.
If I try to put a track by on the repeats it breaks and shows many fields with blank values. Is there any way to correctly implement track by in this situation so that the repeats display correctly and I can type into the input field without it losing focus?
Here is example, if you run it you will see as soon as you edit input you loose focus:
var app = angular.module('App', ['angular.filter']);
app.controller('MainCtrl', function() {
this.Parts = [{
Id: 1,
ShortDescription: "Premium Shocks",
SupplierSku: "ZXU3322",
SellPrice: 110,
SellPriceInclGst: 130,
ProfitExclGst: 10,
SupplierName: 'Super Sports',
Quantity: 3
}, {
Id: 2,
ShortDescription: "Spanner",
SupplierSku: "4444",
SellPrice: 44,
SellPriceInclGst: 130,
ProfitExclGst: 10,
SupplierName: 'Bobs Parts',
Quantity: 1
}, {
Id: 3,
ShortDescription: "Spark Plugs",
SupplierSku: "xxxxx",
SellPrice: 10,
SellPriceInclGst: 130,
ProfitExclGst: 10,
SupplierName: 'Bobs Parts',
Quantity: 5
}]
});
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.min.js"></script>
</head>
<body ng-app="App">
<table class="table" ng-controller='MainCtrl as main'>
<thead>
<tr>
<th>Short Descriptin</th>
<th>SKU</th>
<th>Qty</th>
<th>Unit Price</th>
<th>Total</th>
<th>Total + GST</th>
</tr>
</thead>
<tbody ng-repeat="supplier in main.Parts | groupBy:'SupplierName' | toArray:true | orderBy:'$key'">
<tr class="title-display-row">
<td colspan="6">{{ supplier.$key }}</td>
</tr>
<tr ng-repeat="item in supplier track by $index">
<td>{{ item.ShortDescription }} {{ key }}</td>
<td>{{ item.SupplierSku }}</td>
<td class="field-cell">
<div class="field-wrap">
<input type="text" name="quantity[$index]" ng-model="item.Quantity" />
</div>
</td>
<td>{{ item.SellPrice | currency }}</td>
<td>Total</td>
<td>Total-gst</td>
</tr>
</tbody>
</table>
</body>
</html>
Any suggestions greatly appreciated.
In the unlikely event someone has the same problem as this... the solution was to remove the toArray|true filter.
Then instead of accessing the supplier name with {{ supplier.$key }} I'm using {{ Supplier[0].SupplierName }}. Because each supplier in the loop is an array of items with the same supplier name so I can just take the first and use it.