AngularJS End User Filter multiple values - angularjs

I am trying to create a shop like site where there is a filter option for products. I need the filter to be able to have more than one option selected, and show all the items that contain the selections. Example, checkbox for food is selected, and for furniture, show all products of type food and furniture. If none of these are selected, then show all product types.
I have a JSFiddle that is half working. It will filter down a checkbox, but as soon as a second one is selected, it shows no results.
http://jsfiddle.net/ellenburgweb/om58sdbd/8/
<div ng-app ng-controller="Main">
<input type='checkbox' ng-model='filterFood' ng-true-value="Food" ng-false-value="" />Food
<br />
<input type='checkbox' ng-model='filterFurniture' ng-true-value="Furniture" ng-false-value="" />Furniture
<br />
<input type='checkbox' ng-model='filterFences' ng-true-value="Fences" ng-false-value="" />Fences
<br />
<hr />
<div ng-repeat="product in products | filter:search | filter:filterFood | filter:filterFurniture | filter:filterFences">
{{product.name}} | {{product.type}}</div>
</div>
<script>
function Main($scope){
$scope.products = [{name: 'Product One', type: 'Food'},
{name: 'Product Two', type: 'Furniture'},
{name: 'Product Three', type: 'Fences'},
{name: 'Product Four', type: 'Food'},
{name: 'Product Five', type: 'Furniture'},
{name: 'Product Six', type: 'Fences'}];
}
</script>
I have seen other similar questions, and the answers to them are much like this one: How to filter multiple values (OR operation) in angularJS with checkbox
That method will not work for me. I need all the products to be showing to begin with, and filter out what is not selected.

Forked fiddle here: http://jsfiddle.net/85dobcum/
This should do it for you:
<div ng-app ng-controller="Main">
<input type='checkbox' ng-model='Food' ng-true-value="Food" ng-false-value="" />Food
<br />
<input type='checkbox' ng-model='Furniture' ng-true-value="Furniture" ng-false-value="" />Furniture
<br />
<input type='checkbox' ng-model='Fences' ng-true-value="Fences" ng-false-value="" />Fences
<br />
<hr />
<div ng-repeat="product in products | filter:search | filter: productType">
{{product.name}} | {{product.type}}
</div>
</div>
function Main($scope){
$scope.products = [{name: 'Product One', type: 'Food'},
{name: 'Product Two', type: 'Furniture'},
{name: 'Product Three', type: 'Fences'},
{name: 'Product Four', type: 'Food'},
{name: 'Product Five', type: 'Furniture'},
{name: 'Product Six', type: 'Fences'}];
$scope.productType = function(product) {
var filters = []
filters.push($scope.Food)
filters.push($scope.Furniture)
filters.push($scope.Fences)
if (filters.toString().length <=4) {return true}
else {return filters.indexOf(product.type)>-1 }
}
}

Related

AngularJS End User Filter multiple values Revised

Got a follow up question for a answer I received earlier.
The answer to the first question, here: AngularJS End User Filter multiple values
The follow up question, that I did not realize when I first asked, is what about multiple types for one product.
Fidde: http://jsfiddle.net/ellenburgweb/btpm13m4/2/
<div ng-app ng-controller="Main">
<input type='checkbox' ng-model='Food' ng-true-value="Food" ng-false-value="" />Food
<br />
<input type='checkbox' ng-model='Furniture' ng-true-value="Furniture" ng-false-value="" />Furniture
<br />
<input type='checkbox' ng-model='Fences' ng-true-value="Fences" ng-false-value="" />Fences
<br />
<hr />
<div ng-repeat="product in products | filter:search | filter: productType">
{{product.name}} | {{product.type}}
</div>
</div>
function Main($scope){
$scope.products = [{name: 'Product One', type: 'Food'},
{name: 'Product Two', type: 'Furniture,Fence'},
{name: 'Product Three', type: 'Fences'},
{name: 'Product Four', type: 'Food,Furniture'},
{name: 'Product Five', type: 'Furniture'},
{name: 'Product Six', type: 'Fences'}];
$scope.productType = function(product) {
var filters = []
filters.push($scope.Food)
filters.push($scope.Furniture)
filters.push($scope.Fences)
if (filters.toString().length <=4) {return true}
else {return filters.indexOf(product.type)>-1 }
}
}
I posted an update codepen here: http://jsfiddle.net/ezuq4soc/
The productType function looks like this now:
$scope.productType = function(product) {
var filters = []
filters.push($scope.Food)
filters.push($scope.Furniture)
filters.push($scope.Fences)
if (filters.toString().length <= 3) {
return true
} else {
var types = product.type.split(",")
var match = false
types.some(function(curType) {
match = filters.indexOf(curType.trim()) > -1
return match
})
return match
}
}

Angularjs disabling drop down

I have a ui in which based on the selection of one drop down another dropdown should be disabled. Both these dropdowns are generated using ng-repeat . Below is the code sample
<tr data-ng-repeat="abc in xyz.divisionViewList" >
<select
data-ng-model="abc.selectedAppRole"
ng-init="abc.selectedAppRole =abc.selectedAdRole"
id="{{abc.applicationId}}_{{abc.divisionId}}" name="{{abc.selectedAppRole}}">
<option value="null">Select/Deselect a role</option>
<option data-ng-repeat="roleDetail in abc.roleDetails" data-ng-selected="{{abc.adRole == abc.selectedAdRole}}"
value="{{abc.adRole}}"> {{abc.roleDesc}} </option>
</select>
</tr>
As this is a dynamic generated drop downs based on ng- repeat, i want to put validations based on selection on one drop down. Please let me know how can i put this validation so that i can disable and enable any dropdown based on selection of the other.
I am really stuck on this.
Use ng-disabled and use model value of one of the dropdowns to disable/enable the other.
Example app:
angular.module('app', []).controller('MyController', function($scope){
$scope.dropdownSelections = {};
$scope.dropdownA = [
{value: 1, label: 'Item A1'},
{value: 2, label: 'Item A2'},
{value: 3, label: 'Item A3'},
{value: 4, label: 'Item A4'}
];
$scope.dropdownB = [
{value: 1, label: 'Item B1'},
{value: 2, label: 'Item B2'},
{value: 3, label: 'Item B3'},
{value: 4, label: 'Item B4'}
];
$scope.dropdownC = [
{value: 1, label: 'Item C1'},
{value: 2, label: 'Item C2'},
{value: 3, label: 'Item C3'},
{value: 4, label: 'Item C4'}
];
});
Example template code:
<div ng-controller="MyController">
<div>Dropdown selections: {{dropdownSelections}}</div>
<div>
<legend>Dropdown A</legend>
<select name="A" id="A" ng-model="dropdownSelections.dropdowA" ng-options="item.value as item.label for item in dropdownA"></select>
</div>
<div>
<legend>Dropdown B</legend>
<select name="B" id="B" ng-model="dropdownSelections.dropdowB" ng-options="item.value as item.label for item in dropdownB" ng-disabled="dropdownSelections.dropdowA !== 2"></select>
</div>
<div>
<legend>Dropdown C</legend>
<select name="C" id="C" ng-model="dropdownSelections.dropdowC" ng-options="item.value as item.label for item in dropdownC" ng-disabled="dropdownSelections.dropdowB !== 3"></select>
</div>
</div>
DropdownB will be enabled when DropdownA has option 2 selected. DropdownC will be enabled when DropdownB has option 3 selected. Of course this is only basic example, the code is not perfect, but demonstrates the idea.
I've created working example in this JSFiddle.
More information about ng-disabled can be found in this doc.

Filter posts by selected option in angularjs

<div class="ng_wrapper"
data-ng-init="portfolios=[
{name: 'Portfolio 1', type: 'red'},
{name: 'Portfolio 2', type: 'red'},
{name: 'Portfolio 3', type: 'black'},
{name: 'Portfolio 4', type: 'black'}
]">
<ul>
<li data-ng-repeat="portfolio in portfolios | filter:type ">
{{ portfolio.name | uppercase }} - [{{ portfolio.type | lowercase }}]
</li>
</ul>
<select><option>red</option><option>black</option></select>
</div>
How can I filter by 'type' with select? When I choose red, I want to display only red portfolios. How can I do that?
Thanks
You can add a ng-model attribute to the Drop-down and refer the same in filter of ng-repeat
<div class="ng_wrapper" data-ng-init="portfolios=[
{name: 'Portfolio 1', type: 'red'},
{name: 'Portfolio 2', type: 'red'},
{name: 'Portfolio 3', type: 'black'},
{name: 'Portfolio 4', type: 'black'}
]">
<ul>
<li data-ng-repeat="portfolio in portfolios | filter:portfolio_type ">
{{ portfolio.name | uppercase }} - [{{ portfolio.type | lowercase }}]
</li>
</ul>
<select ng-model="portfolio_type">
<option>red</option>
<option>black</option>
</select>
</div>
Working demo: http://plnkr.co/edit/5md1XYgNhrxWUWW8CwDc?p=preview

angularjs filter on nested objects

I am quite new with angularjs so I am not sure if what I am trying to do is the right way. Basically I want to display in my page a nested object, and a filter, this way the user can easily type keywords on an input and the content get filtered, to only display the recods that get found by the filter
However I notice that the filter gets the whole parent object and i was expecting only display the record, so with the following code, if i search for Japan it will display Sydney, Melbourne and los angeles.
Javascript
<script type="text/javascript">
var demoApp = angular.module('demoApp',['ngSanitize']);
demoApp.controller('simpleC',['$scope', function ($scope){
$scope.info = [
{name: 'Documents',links: [
{linkname:'title1',linknamesublink:[
{namesublink:'document 1', description: 'Sydney'},
{namesublink:'document 2', description: 'Tokyo <b>Japan</b>'}
]},
{linkname:'title2',linknamesublink:[
{namesublink:'document 3', description: 'Melbourne'},
{namesublink:'document 4', description: 'Los Angeles'}
]}
]},
{name: 'Video',links: [
{linkname:'title1',linknamesublink:[
{namesublink:'video 1', description: 'California'},
{namesublink:'video 2', description: 'San Francisco <b> USA</b>'}
]},
{linkname:'title2',linknamesublink:[
{namesublink:'video 3', description: 'South America'},
{namesublink:'video 4', description: 'Northern <b>Europe</b>'}
]},
{linkname:'title3',linknamesublink:[
{namesublink:'video name 5', description: 'Africa'},
{namesublink:'video name 6', description: 'Bangkok <b>Thailand</b>'}
]}
]},
];
}]);
</script>
html:
<div class="container" ng-app="demoApp">
<br /><input type="text" class="form-control" ng-model="search" >
<div ng-controller="simpleC">
<div ng-repeat="i in info | filter:search" >
{{i.name}} :
<div ng-repeat="link in i.links">
{{link.linkname}}
<div ng-repeat="sublink in link.linknamesublink">
{{sublink.namesublink}}: <!--{{sublink.description}}-->
<span ng-bind-html="sublink.description"></span>
</div>
</div>
</div>
</div>
</div>
Follow this example
http://www.whatibroke.com/?p=857
You can use filter in ng-repeat to filter items by property or write a filter yourself.
The author want to filter postcode property by the value of searc_postcode. So, he wrote //filter {postcode : search_postcode} //
Ps. Sorry, I misinterpret your question.
Write your own filter function. This way, you have total control over what is returned. https://docs.angularjs.org/api/ng/filter/filter
module.filter('searchfilter', function() {
return function(searchexpr) {
var filteredList = ['my', 'filtered', 'result'];//implement yourself
return filteredList;
};
});
and use searchfilter instead of filter in your markup.
Or, try to use a filter function as described here: http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/filtering-and-sorting-a-list.html (as far as I can tell, you didn't define a search function, i.e. the first agument for the filter expression).
Modified :
If you want to filter the objects based on any field(say "name"), you can use the below format
<div ng-repeat="i in info" ng-if="search==i.name">

AngularJs grouping by property

I need a way to order a list by its properties.
I have this plunker: http://jsfiddle.net/Tropicalista/aF2aL/1/
but don't know hoe to proceed. I need a way to order the list based on what I select in checkboxes...
function myCtrl($scope){
$scope.friends = [
{
name: "Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "George Michael",
gender: "Male",
hair: "Brunette"
},
{
name: "Gob",
gender: "Male",
hair: "Brunette"
},
{
name: "Tobias",
gender: "Male",
hair: "Black"
},
{
name: "Lindsay",
gender: "Female",
hair: "Blonde"
},
{
name: "Maeby",
gender: "Female",
hair: "Black"
}
];
$scope.orderBy = function(target){
$scope.groups = _.groupBy($scope.friends, target);
}
$scope.activeGroups = {};
}
And this is my html:
<input type="checkbox" ng-click="orderBy('name')" />Name
<input type="checkbox" ng-click="orderBy('gender')" />Gender
<input type="checkbox" ng-click="orderBy('hair')" />Hair
<div data-ng-repeat="(myFilter, users) in groups">
<h2>{{myFilter}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
First, for something like this, I much prefer using a radio instead of a checkbox. It is semantically correct. Check boxes indicate that you can group by more than one field, and it doesn't appear, from your question, that you are trying to do that.
Knowing that, you can define your radios like this:
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="gender" />Gender
<input type="radio" ng-model="grouping" value="hair" />Hair
Now, you can just tell your ng-repeat to group based on a groupedFriends collection:
<div data-ng-repeat="(group, users) in groupedFriends">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="user in users">
{{ user.name }}
</li>
</ul>
</div>
And then your controller just watches the grouping variable and group the data:
$scope.$watch('grouping', function() {
$scope.groupedFriends = _.groupBy($scope.friends, $scope.grouping);
});
$scope.grouping = "gender";
Here is a working fiddle.
STEVE HOLT!
You can use groupBy of angular.filter module, It's easy to use, and actually more fast than lodash implementation see: link.
Usage: (key, val) in collection | groupBy: 'property' or nested.property
here's an example:
JS:
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
HTML:
<ul ng-repeat="(key, value) in players | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
RESULT:
Group name: alpha
* player: Gene
Group name: beta
* player: George
* player: Paula
Group name: gamma
* player: Steve
* player: Scruath
UPDATE: jsbin

Resources