Can I filter my search in ui-select on specific fields of my object? Or should I create a custom filter? I have seen this answer and it says it works, but my following code is not working:
<ui-select ng-model="model.selected">
<ui-select-match>
<span class="ng-cloak">{{$select.selected.id ? $select.selected.id+ ' (' + $select.selected.sn + ') ' : "Select One" }}</span>
</ui-select-match>
<ui-select-choices repeat="item in items | filter: {id: $select.search.id, sn: $select.search.sn}">
<span ng-bind="(item.id) + ' (' + (item.sn) + ') ' "></span>
</ui-select-choices>
</ui-select>
Assuming the each item in items has the following attributes:
id
sn
fn
Given the following dataset:
[
{"id":"Ja111", "sn":"Jacobs","fn":"Jim"},
{"id":"Ja222", "sn":"Jagger","fn":"Robert"},
{"id":"Jo111", "sn":"Jones","fn":"Stan"},
{"id":"J111", "sn":"Johnson","fn":"Alfred"},
{"id":"Sm111", "sn":"Smith","fn":"Joe"}
]
using:
<ui-select-choices repeat="item in items | filter: {id: $select.search, sn: $select.search}">
will perform an "and" operation on the specified fields (in this case id and sn) (e.g. the search criteria "Jo" will find only "Stan Jones")
using:
<ui-select-choices repeat="item in items | filter: $select.search">
will perform an "or" operation across all fields (e.g. the search criteria "Jo" will find "Stan Jones", "Alfred Johnson" and "Joe Smith")
using:
<ui-select-choices repeat="item in items | propsFilter: {id: $select.search, sn: $select.search}">
will perform an "or" operation on the specified fields (in this case id and sn) (e.g. the search criteria "Jo" will find "Stan Jones" and "Alfred Johnson" - note it won't find "Joe Smith" as the filter is not looking at the fn field)
The following Plunkr shows the above examples in action.
For your requirements (I assume you want an "or" filter but only on specific fields) I'd go down the propsFilter route. This seems to be what the ui-select Basic Demo uses too.
Related
I have this ui select:
<ui-select multiple
ng-model="meas.daysSelected"
theme="bootstrap"
close-on-select="false">
<ui-select-match placeholder="days">{{$item}}</ui-select-match>
<ui-select-choices repeat="day in days | filter:$select.search">
<div ng-bind-html="day | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
$scop.days = ['Sun', 'Mon', 'Tue' ... ]
it is in a simple table with angular ng-repeat
<tr ng-repeat="meas in foo= (res.foos | filter: subSearch : strict)">
and I filter it with:
<input type="text" class="form-control" ng-model="subSearch.daysSelected">
The problem is like this: the "daySelected" model is becoming an array when I select an object and then de-select it. the filter of angular just dismisses it and filters it.
So I need help in one of the 2:
make daySelected as a string (when selected it will be: "sun, mon"
or
adjust the filter to work in array
Assuming the search text is going to be like "Mon,Tue" which will filter all the ui-selects which have ["Mon","Tue"] you can write your own filter function and pass that. For example:
<tr ng-repeat="meas in foo= (res.foos | filter: $ctrl.filterDaysSelected">
And in your controller you'd need to create that function:
$ctrl.filterDaysSelected = function(value, index, array) {}
Where you would need to:
Split the value of your search criteria by ","
Validate that each item in your split array exists in the function value parameter
I'm getting two items back from my API, one has a startDate and one has an endDate and I was wondering if it's possible to order them by their parameter string?
Data:
[
{
name: "Item 1",
type: "Start Time"
},
{
name: "Item 2",
type: "End Time"
}
]
Something like so:
<li ng-repeat="item in items | orderBy: type='Start Time'">{{ item.name }}</li>
Is is possible using Angular's orderBy filter?
Any help is appreciated.
No need to specify StartTime,
<li ng-repeat="item in items | orderBy: 'type'>{{ item.name }}</li>
Here is the working Application
You only need to specify the key by which you want to order in your orderBy:
orderBy: 'type'
And if you want to reverse the order use -:
orderBy: '-type'
<ui-select id="facility" multiple ng-model="IdRequest.formData.facilityRequestedArray" validation="required" ng-disabled="IdRequest.formData.applicantReadOnly" class="drop-down">
<ui-select-match allow-clear="true" placeholder="{{'select'|translate}}">
{{$item.displayText}}
</ui-select-match>
<ui-select-choices repeat="facility.id as facility in IdRequest.facilityList">
{{facility.displayText}}
</ui-select-choices>
</ui-select>
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: $item in $select.selected, Duplicate key: number:1, Duplicate value: 1
I'm having the same issue with ui-select (version 2.1.3). The selected items are loaded via ajax, the correct selection will show up but when clicked to select another option, the already selected options are within the possible options and when selected again a dupe error is firing.
I decided not to dig in the sources, instead to force refresh the directive from the script.
This is the fix:
HTML
<ui-select multiple="true" ng-model="x.itemsSelected" theme="bootstrap">
<ui-select-match placeholder="Select Eligibility Item...">{{$item.name + ' #' + $item.id}}</ui-select-match>
<ui-select-choices repeat="item.id as item in x.itemsAvailable | filter: $select.search track by $index" refresh="uiSelectRefreshFix($select)" refresh-delay="1000">
<div ng-bind-html="item.name + ' #' + item.id | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
Controller
// ui-select bugfix.
$scope.uiSelectRefreshFix = function () {
if ($scope.uiSelectFix) return;
$scope.uiSelectFix = true;
var fix = $scope.x.itemsSelected;
$scope.x.itemsSelected = [];
setTimeout(function() {
$scope.$apply(function(){
$scope.x.itemsSelected = fix;
});
}, 100)
console.log([model, query]);
}
Set your multiple equal to true like so:
<ui-select id="facility" multiple='true' ng-model="IdRequest.formData.facilityRequestedArray" validation="required" ng-disabled="IdRequest.formData.applicantReadOnly" class="drop-down">
See this github link: https://github.com/angular-ui/ui-select/issues/366
If you have duplicate facilities also add track by $index to your repeater like this:
<ui-select-choices repeat="facility.id as facility in IdRequest.facilityList track by $index">
just started Angularjs, I have a simple application where orderBy is not working. What is wrong here?
<body ng-init="names=['Ruby','Java','Oracle','Basic']">
<input type="text" data-ng-model="name"/>
<ul>
<li ng-repeat="name in names | orderBy:'name' | filter:name">{{name | uppercase}}</li>
</ul>
<script type="text/javascript" src="js/angular.js"></script>
</body>
The orderBy filter will order an array of objects by a property within each member of the array. So if you say orderBy: 'name' then each member of the array should have a property called name in it. In your array there are no properties of name because your array contains Strings not Objects. If your array looked like:
names = [ { name: 'Ruby' }, { name: 'Java' }, { name: 'Oracle' }, { name: 'Basic'} ]
Then it'd work. Or you can change orderBy: 'name' to orderBy like so:
<li ng-repeat="name in names | orderBy | filter:name">{{name | uppercase}}</li>
Then it won't use a property of the member to order by and instead use the value of each member to order the array which is what you want with Strings.
The orderBy only works with arrays of objects -- See http://docs.angularjs.org/api/ng.filter:orderBy
I made a JSfiddle for you
http://jsfiddle.net/aBccw/
$scope.names =[{name:'Ruby'}, {name:'test'},{name:'Oracle'},{name:'Basic'}];
Hope it helps
Answering my own question. Removed single quote from name and it started working. But not sure if I should stop using quotes?
<li ng-repeat="name in names | orderBy:name | filter:name">{{name | uppercase}}</li>
I want to filter on a select like so :
<select ng-model="test" ng-options="c as c.label group by c.type for c in columns
| filter:{c.type:'!field'} | filter:{c.type:'!map'}"></select>
EDIT : Adding the column model :
Columns = [
{
name: "name",
label: "Label",
info: "Information displayed in help",
type: "type",
view: "html template",
style: "min-width: 10em;",
show: true
},
{
...
}
];
Columns is used for several things and to optimize my code I need it to be also in a Select, but without the entries whose type are 'field' nor 'map'
Yet, I get to choose from everything, even the entries which types are 'field' and 'map'.
Is there a clean way to do it ?
AngularJS NOT Filter
<select ng-model="test" ng-options="c as c.label group by c.type for c in columns
| filter:{ type : '!field' }
| filter:{ type : '!map' }">
</select>
Fiddle
From the docs:
"...The predicate can be negated by prefixing the string with !."
"A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1"..."