Im trying to filter by price, i got a code that its not working properly and i cant seen to know why.
app.js
app.filter('price', function () {
return function ( product , value ) {
// console.log(product, value);
var filteredItems = [];
angular.forEach(product , function ( product ) {
if ( product.price >= value ) {
filteredItems.push(product);
console.log(product);
}
});
return filteredItems;
}
})
the input
<select ng-model="greaterThan" name="price-min">
<option value="">Desde</option>
<option value="500">500</option>
<option value="2000">2000</option>
<option value="5000">5000</option>
<option value="20000">20000</option>
</select>
ng-repeat
<div ng-repeat="product in cars.records | price:greaterThan | filter:query | limitTo:6 " class="mdl-cell mdl-cell--4-col mdl-cell--middle mdl-cell--12-col-phone">
link to the website:
(first input)
http://apcarautomoveis.pt/feed.php
Related
I want my code to send the variable from onChange to useState here's my code at for displaying my table on each row
const dataTableElements = entireListData
.slice(0, maxRow)
.map((entireListData, index) => {
var dotStatus = null;
if (entireListData.PriceStatus == true) {
dotStatus = <GreenDot>{entireListData.Price}</GreenDot>;
} else {
dotStatus = <RedDot>{entireListData.Price}</RedDot>;
}
return (
<Tr data-index={index}>
<Td>{entireListData.no}</Td>
<Td>{entireListData.BillNo}</Td>
<Td>{entireListData.Product}</Td>
<Td>
<StatusTableBox>{dotStatus}</StatusTableBox>
</Td>
</Tr>
);
});
next is my select tag
return (
<div>
<Tabbar />
<div>
<p>
Show
<select
value={entireListData.no}
onChange={() => {
sendCurrentRow(entireListData.no);
}}
>
{rowTableElement}
</select>
Entires
</p>
</div>
from the result of the above, it shows in console "undefined".
Usually the select tag gives an event in the onChange method that you can use to extract the value which selected, take a look at this example:
<select
value={entireListData.no}
onChange={(event) => {
sendCurrentRow(event.target.value);
}}
>
//here should be your options with different values
<option value="1">
1
</option>
<option value="2">
2
</option>
// I don't know this value has the option or not => {rowTableElement}
</select>
I wanna sort the sizes of my clothes but when I click to elect the size, no matter what I choose, it stays "All"...Is there anything wrong with my function filterProducts?
function Filter(props) {
return (
<div className="filter">
<div className="filter-result">{props.count} Products</div>
<div className="filter-sort">
Order
<select value={props.sort} onChange={props.sortProducts}>
<option value="latest">Latest</option>
<option value="lowest">Lowest</option>
<option value="highest">Highest</option>
</select>
</div>
<div className="filter-size">
Filter
<select value={props.size} onChange={props.filterProducts}>
<option value="">All</option>
<option value="">XS</option>
<option value="">S</option>
<option value="">M</option>
<option value="">L</option>
<option value="">XL</option>
<option value="">XXL</option>
</select>
</div>
</div>
);
}
My codesand link:https://codesandbox.io/s/redux-shop-cart-forked-tlpek?file=/src/App.js
All the size options were missing unique value props, they were all value="".
Update the value props to match your data:
Filter
<select value={props.size} onChange={props.filterProducts}>
<option value="">All</option>
<option value="XS">XS</option>
<option value="S">S</option>
<option value="M">M</option>
<option value="L">L</option>
<option value="XL">XL</option>
<option value="XXL">XXL</option>
</select>
You also had a typo in filterProducts in App where you reset the state to a product property instead of products. This wasn't allowing the "All" filter value to work.
filterProducts = (event) => {
if (event.target.value === "") { // all
this.setState({
size: event.target.value,
products: data.products // <-- reset products!!
});
} else {
this.setState({
size: event.target.value,
products: data.products.filter(
(product) => product.availableSizes.indexOf(event.target.value) >= 0
)
});
}
};
My other filter is not working.
<ul>
<li ng-repeat="result in pagedResults | filter:selectedBuilders | filter:selectedBedrooms" on-finish-render="ngRepeatFinished">
[...]
</li>
</ul>
Filter:selectedBuilders is Working. But Filter:selectedBedrooms is not working
<select ng-model="selectedBedRooms" ng-change="selectBedRooms()">
<option value="">Bedrooms</option>
<option value="1">1 Bedroom</option>
<option value="2">2 Bedrooms</option>
</select>
Here is the JS.
$scope.selectBedRooms = function () {
if ($scope.selectedBedRooms) {
$scope.selectedBedrooms = $scope.selectedBedRooms;
} else {
$scope.selectedBedrooms = "";
}
}
JSON.
Here...
data: Array(55)
0 {
Address : "Estuary"
Baths : 2
Beds : 3
Builder: "/media/1394/logo.png"
BuilderComp : "LB Homes"
ContentId : 3130
}
...
I was wondering why selectBedrooms is not working and selectBuilders is working?
Am I missing something?
Any ideas for this?
try using
<li ng-repeat="result in pageResults | filter: selectFilter"></li>
Controller
$scope.selectFilter = function (result)
{
return(result.Beds==$scope.selectedBedRooms && result.Builder == $scope.selectedBuilder);
}
i want to ask. I'd already search about angularjs filter but havent found yet what is the solution for mine. I use angular for make android app with IONIC framework.
I have data with price. I want to filter it by price range.
ex:
name type price
item01 fruit 25000
item02 vegetable 50000
item03 vegetable 10000
I have 2 select box for filtering
<select ng-value="fprice">
<option value="">All</option>
<option value="0">0-24999</option>
<option value="25000">25000-49999</option>
</select>
<select ng-value="ftype">
<option value="">All</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
I want if i select the second value (price) then item02 didnt show.
I have code like
<ion-list>
<ion-item ng-repeat="item in items | filter: { type: ftype, price: ??? }">
{{item.name}}<br>
{{item.type}}<br>
{{item.price}}
</ion-item>
</ion-list>
What is the code for my ??? in my code? I have try some but still dont find what I looking for.
Thank you. Sorry for bad english.
You can create custom filter. I post example on jsfiddle
In filter you can put what you want.
my custom filter
autoDrops.filter('filterCostum', function () {
return function (datas, fprice, ftype) {
console.log(ftype)
var options = [];
angular.forEach(datas, function (data) {
if(ftype != ""){
if (data.type == ftype) {
if(fprice == ""){
options.push(data);
}
else if(fprice == 0){
if(data.price >= 0 && data.price <=24999)
options.push(data);
}
else if(fprice == 25000){
if(data.price >= 25000 && data.price<=49999)
options.push(data);
}
}
}
else{
console.log(fprice)
if(fprice == ""){
options.push(data);
}
else if(fprice == 0){
if(data.price >= 0 && data.price <=24999)
options.push(data);
}
else if(fprice == 25000){
if(data.price >= 25000 && data.price<=49999)
options.push(data);
}
}
});
return options;
}
})
I call like this
<div ng-app="autoDrops" ng-controller="DropsController">
<select ng-model="fprice">
<option value="">All</option>
<option value="0">0-24999</option>
<option value="25000">25000-49999</option>
</select>
<select ng-model="ftype">
<option value="">All</option>
<option value="fruit">Fruit</option>
<option value="vegetable">Vegetable</option>
</select>
<div>
<div>
<div ng-repeat="elem in datas | filterCostum: fprice: ftype">
{{elem}}
</div>
</div>
<div>
link edited
I'm using a array iteration to know which is the selected option. I'm insterested on id atribute of result. is there other way?
<input type="text" list="products" ng-model="query" />
<datalist id="products">
<option value="{{result.name}}" ng-repeat="result in results" >
</datalist>
...
$scope.search = function (query) {
$scope.results.forEach(function (result) {
if (result.name === query) {
// code here
}
}
}
...
Try this:
<datalist id="products">
<option value="{{result.name}}" ng-selected="query.id == result.id" ng-repeat="result in results" >
</datalist>