I'd like to make orderBy based on multiple select menu. for example:
Order :
<select ng-model="filterOrder">
<option value="+">- to +</option>
<option value="-">+ to -</option>
</select>
Column:
<select ng-model="filterColumn">
<option value="name">Name</option>
<option value="age">Age</option>
</select>
<div ng-repeat="user in users|orderBy:'filterOrder.filterColumn'">
{{user.name}} {{user.age}} <br>
</div>
Thanks!
You want to use the reverse argument of orderBy
<div ng-repeat="user in users|orderBy:filterColumn: filterOrder == '-'">
The expression filterOrder == '-' will return a boolean for that argument
Related
can someone tell me how can I make empty value, that if nothing is in list of select, show "n/a"
demo
https://codepen.io/Turqus/pen/wPrKrr?editors=1010
template
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
</select>
<select class="form-control" ng-model="selectedList">
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
</div>
<option ng-repeat=" item in downloadsLists" >{{$index || "n/a"}}</option>
<select class="form-control" ng-model="selectedList">
<option disabled selected value
ng-show="downloadedLists.length == 0">n/a</option>
<option ng-repeat="item in downloadedLists" value="{{$index}}">{{$index}}</option>
</select>
<option value="">N/A </option>
<option ng-repeat="item in boards" value="{{$index}}">{{$index}}</option>
Okay, I really can't find the right term/words to describe this. Basically, I have a select control and a div with ng-repeat
<select ng-model="selectedCode" >
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" >
<option value="">ALL</option>
<option value="John">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-repeat="item in myList" ng-if="item.code==selectedCode && item.Name==selectedName" >
<!--show some data-->
</div>
That code kinda works but I have no idea how to show all if the selected item is "ALL".
This Expression will Display all items with the selected code or name, if the other select is set to "ALL". It will also display all items, if both select boxes are set to "ALL". And it will show only the matching items with the correspondant name and code, if none of the select boxes has been set to "ALL".
ng-if="(selectedCode==item.code || selectedCode=='') &&
(selectedName==item.name || selectedName=='')">
To preselect a value, so the ng-if gets applied directly after page load, you may add an ng-init Expression for setting a default value, like so.
ng-init="selectedCode=''"
ng-init="selectedName='John'"
To put all this into a context, here is an example, showing a table with ng-repeat and the two select boxes for utilizing the ng-if Expression. The code "" and the name "John" are preselected and I added the JavaScript block.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="ngApp">
<select ng-model="selectedCode" ng-init="selectedCode=''">
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" ng-init="selectedName='John'">
<option value="">ALL</option>
<option value="John" selected="selected">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-controller="ngController">
<table>
<tr>
<th>Code</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
</div>
<script>
angular.module('ngApp', [])
.controller('ngController', function($scope) {
$scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ];
});
</script>
</body>
</html>
In my case, the dynamic (provided or created through ng-repeat) <option>s in a <select> are not properly selected (like in cases when the ng-model has an init value).
<select ng-model="my-model">
<option ng-repeat="n in numbers" value={{ n.val }}>{{ n.name }}</option>
</select>
Here's a plnkr to demonstrate my problem.
Try to use the ng-options directive on the select element instead of doing an ng-repeat.
<select ng-model="model2" ng-init="model2 = '3'" ng-options="n.value as n.name for n in numbers">
<option value="">Select an option..</option>
</select>
instead of
<select ng-model="model2" ng-init="model2 = '3'">
<option value="">Select an option..</option>
<option ng-repeat="n in numbers" value="{{ n.value }}"> {{ n.name }} </option>
</select>
source: select directive doc
updated plunkr: ng-options plunkr
EDIT:
If you really want to keep your ng-repeat, you can add additional markup to make it work:
<select ng-model="model2" ng-init="model2 = '3'">
<option value="">Select an option..</option>
<option ng-repeat="n in numbers" value="{{ n.value }}" ng-selected="n.value == model2"> {{ n.name }} </option>
</select>
updated plunkr: ng-repeat plunkr
Regards,
Camusensei
I want to filter my table using select value. In my code below, using input type=text... filter works just fine. But i don't know how to filter using select value.
<div class="columns large-2-5">
<select name="categorySelector"
class="selectbox"
ng-model="search"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
</div>
<div class="row">
<input type="text" ng-model="search.name">
<table class="grid">
<tbody ng-repeat="image in imageList | filter: { category: search.name }">
<tr photolistsetting-Directive
title="{{ image.name }}"
ref="{{ image.url }}"
category="{{ image.category }}">
</tr>
</tbody>
</table>
</div>
select list is made of objects. Maybe i can't access an object property ?
Thank you.
Use this:
<select name="categorySelector"
class="selectbox"
ng-model="search.name"
ng-options="category.name for category in categories">
<option value="">Select Category</option>
</select>
Edit: Sorry I pointed out incorrect earlier.
Can you post "categories" and "imageList" array here?
Why is this repeater broken
<select name="quarter" ng-model="Quarter" ng-selected="Quarter" >
<option ng-repeat="v in [1,2,3,4]" value="{{v}}">Q{{v}}</option>
</select>
But not the handwritten way?
<select name="quarter" ng-model="Quarter" ng-change="onQuarterChange()" ng-selected="Quarter">
<option value="1">Q1</option>
<option value="2">Q2</option>
<option value="3">Q3</option>
<option value="4">Q4</option>
</select>
stick with ng-options
<div ng-app>
<h2>Todo</h2>
<div ng-controller="QuarterController">
<select name="quarter" ng-model="Quarter" ng-options="obj.value as obj.text for obj in [{'value': 1,'text' : 'Q1'},{'value':2,'text':'Q2'},{'value':3,'text':'Q3'},{'value':4,'text':'Q4'}]">
</select>
</div>
</div>
function QuarterController($scope) {
$scope.Quarter = 2;
}
http://jsfiddle.net/hDNsm/3/
you might as well define the array in your controller
Notice two things:
'ng-selected' directive should be written on the 'option' element and not on the 'select' element.
the content of the 'ng-selected' attribute should be a condition in which the option is selected. a simple example for this could be if the value of the option equals the select model.
Your code should be something like this:
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==Quarter">Q{{v}}</option>
</select>