I have created a daterangefilter:
app.filter('dateRangefilter', function() {
return function(input,dateFrom,dateTo) {
return _.filter(input, function (d) {
return Date.parse(d.date) >= Date.parse(dateFrom) && Date.parse(d.date) <= Date.parse(dateTo);
});
}
});
However when I try to filter my list I get an error:
<div ng-controller="Controller">
<ul>
<li ng-repeat="item in data | dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
</ul>
</div>
This is the data:
$scope.data = [{
"id": 1,
"name": "een",
"date":"12/08/2015"
}, {
"id": 2,
"name": "twee",
"date":"11/08/2015"
}];
plunkr: http://plnkr.co/edit/km23JzP925y95bVCPkqA?p=preview
You have to replace your line:
<li ng-repeat="item in data | dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
to:
<li ng-repeat="item in data | filter:dateRange(dateFrom,dateTo) ">
{{item.name}}
</li>
With this your code works but I don't know if it has to do whatever you want.
Regards.
Related
How to show comments in items?
This is where items save
$scope.items = [
{ 'item': 'one',
'comments':[{'comment':'comment'}]
},
{ 'item': 'two',},
{'item': 'three'}
];
<ul>
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div>
</li>
</ul>
http://plnkr.co/edit/19w1Q3XhoWQcpxm5SuxX?p=preview
You Just missed to add your comment Div in between the list tag. please update the code like above code. I have checked on Plunker.
<li ng-repeat="ite in items">
{{ite.item}} {{ite.comments.length}}
<button ng-click="remove($index)">Remove</button> <div ng-repeat="c in ite.comments">{{c.comment}}</div></li>
I'm struggling to grasp how to make a custom filter. I'm looking for the function to filter by ItemID from a dropdown. This works fine, but I need it to stop filtering if the type is of value 8. This is because I'm changing the dataset where item_typeID does not exist
My current code
<ul ng-repeat="(key, item) in stock | filter: {item_code: searchCode} | filter: {item_name: searchName} | filter: {productID: product} | filter: {companyID: company} | filter: { item_typeID: type } ">
<li ng-show="stock_items" >
<div>Product</div>
{[{ item.product_name }]}
</li>
<li ng-show="stock_items" >
<div>Item Name</div>
<a ng-click="openModal(item.itemID)" class="activate_modal" name="modal_window">{[{ item.item_name }]}</a>
</li>
<li ng-show="stock_items">
<div>Item Code</div>
{[{ item.item_code }]}
</li>
<li ng-show="stock_items" >
<div>Stock level</div>
{[{ item.total_stock }]}
</li>
<li ng-show="stock_items">
<button ng-click="addItem(item.itemID, key)" ng-disabled="disable_them[key]" style="width:100%;" class="btn-icon add-to-cart">Add</button>
</li>
Just to let you know I've change the standard {{ tags to {[{ so that I can use the Blade templating in Laravel
I changed the filter line to contain this
<ul ng-repeat="(key, item) in stock | filter: {item_code: searchCode} | filter: {item_name: searchName} | filter: {productID: product} | filter: {companyID: company} | filter: typeFilter ">
This includes the new filter "typeFilter" Then in the Javascript added the following scope function
$scope.typeFilter = function (type) {
if($scope.type == undefined || $scope.type == "") {
return true;
} else if(type.item_typeID == $scope.type){
return true;
} else if($scope.type == 8) {
return true;
} else {
return false;
}
}
I have two array which is given below
$scope.base64Array=[null, null, "/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQ…cmnAgj0PvTTgZJ5osK4w8dahc1MTnOMcnionwR2JNKwXP/9k=", null, null, null];
$scope.products=["Wheat", "LCD Monitor", "Ethernet Cable", "Optical Mouse", "Rice", "Mac Mini RAM 4 GB"];
Here I have an null value in base64array if it is null then no need to display image and if i have base64 string i need to display in that image row
and my ionic view looks like
<ul class="list">
<li class="item" ng-repeat="i in products" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="imgURI === undefined" ng-src="http://placehold.it/100x100">
</li>
</ul>
You can add a track by $index to the repeat so you can tell which index you are at then index into base64Array.
<ul class="list">
<li class="item" ng-repeat="i in products track by $index" ui-sref="leadProduct" >
{{i}}
<br>
<img ng-show="base64Array[$index] != undefined" ng-src="{{'data:image/png;base64,'+base64Array[$index]}}">
<img ng-show="base64Array[$index] == undefined" src="http://placehold.it/100x100">
</li>
</ul>
Try process this two arrays before assignment, loop the base64Array, remove the null item and the same index item in products.
var tmp_base64Array = ["/9j/4AAQSkZJRgABAQAAAQABAAD..."];
var tmp_products = ["Ethernet Cable"];
After process the two arrays would be like this, then assignment to $scope.
edit:
$scope.products = [
{ "name": "Wheat", "imgUrl": null },
{ "name": "LCD Monitor", "imgUrl": "/9j/4AAQSkZJRgABA..." }
];
<ul class="list">
<li class="item" ng-repeat="product in products" ui-sref="leadProduct" >
{{product.name}}
<img ng-src="{{product.imgUrl || 'http://placehold.it/100x100'}}">
</li>
</ul>
I have tried to filter blank string item from ng-repeat. But didn't succeeded. Can someone please help me at this.
JSFiddel Link
HTML Code:
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details | filter: filter2 ">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
JS Code:
function myCtrl($scope) {
$scope.details = [{
name: 'Bill',
shortDescription: null
}, {
name: 'Sally',
shortDescription: 'A girl'
},{
name: 'Tally',
shortDescription: ''
}];
}
function filter2(detail){
if (item.shortDescription.length == 0){
return true;
}
else{
return false;
}
}
Expected Result:
/*
Expected Result
Bill
Sally
*/
<div ng-app ng-controller="myCtrl">
<ul>
<li ng-repeat="detail in details" ng-if="detail.shortDescription">
<p>{{detail.name}}</p>
</li>
</ul>
</div>
fiddle
I am trying to make a filter using an array of object. but I am not getting the answer as per I requested.
the object the one I looping though has 3 steps of arrays. I am trying to filter them and show in the li element but not working. only the first step works for me.
the array is : "Name,SubProjectsandContracts` ( all are nested inside of the main object)
here is my try:
<div class="section filter1">
<ul>
<li ng-repeat="value in values"> {{value.Name}}</li>
</ul>
</div>
<div class="section filter2">
<ul>
<li ng-repeat="value in values | SubProjects"> {{$index}}</li>
</ul>
</div>
<div class="section filter3">
<ul>
<li ng-repeat="value in values | SubProjects | Contracts"> {{value.Name}}</li>
</ul>
</div>
object for sample :
{
"Id": "1",
"Name": "Khalifa International Stadium",
"SubProjects": [
{
"Contracts": [
{
"CompletedPercentage": 0,
"Id": "583",
"Name": "LP/C21/145",
"Phase": null
},
{
"CompletedPercentage": 0,
"Id": "529",
"Name": "KP/B21/134",
"Phase": null
},
{
"CompletedPercentage": 0,
"Id": "575",
"Name": "LP/C21/142",
"Phase": null
}
],
"Id": "2",
"Name": "Energy Center"
},
Live Demo
You need to build the custom filter according to your requirement here. See this example, and let me know if you face any issue with your case. For documentation please check. A more simple example with same approach.
<input type="text" ng-model="search">
<ul ng-repeat="oneauth in authorisations[0]">
<li ng-repeat="entry in oneauth | nameFilter:search">
{{entry.auth.name}}</li>
</ul>
app.filter('nameFilter', function(){
return function(objects, criteria){
var filterResult = new Array();
if(!criteria)
return objects;
for(index in objects) {
if(objects[index].auth.name.indexOf(criteria) != -1) // filter by name only
filterResult.push(objects[index]);
}
console.log(filterResult);
return filterResult;
}
});