I need help with filtering data in ng-repeat. I've tried to do few things but I can't find solution that works in my case. I need to to something like this:
sensor in sensors | filter: { group: group.id, (name: search || description: search) }
Search is ng-model (text input) and group.id is ID of group that are genereted in ng-repeat (I have two nested ng-repeat). I've tried to do my filter:
$scope.search = '';
$scope.searchFilter = function() {
return function (p) {
if ($scope.search!='') {
for (var i in p) {
console.log("p.name: "+p.name+", search: "+$scope.search);
if (p.name == $scope.search || p.description == $scope.search) {
return p;
}
}
} else {
return p;
}
}
}
Almost works. It filters my data but only if I write correct name. For example I want to find "engine". If I start writing "en" there is no data but if I write "engine" it will display correct data. So I need to work on that too. I hope you understand what I want to do.
I've found solution!
sensor in sensors filter: { group: group.id } | filter: searchFilter()
And this:
$scope.search = '';
$scope.searchFilter = function() {
return function (p) {
if ($scope.search!='') {
for (var i in p) {
var re = new RegExp($scope.search, 'i'); // This I've add
if (p.name.match(re) || p.description.match(re) ) { // This I've change
return true;
}
}
} else {
return true;
}
}
}
Related
How to change the size of fields in Infor EAM?
Anyone with experience with Infor EAM would be gladly appreciated.
You could do it using Extensible Framework. For example, following code will change width of work order and equipment description fields if you put it in EF of WSJOBS screen.
Ext.define(
'EAM.custom.external_WSJOBS', {
extend: 'EAM.custom.AbstractExtensibleFramework',
getSelectors: function () {
if( EAM.app.designerMode == false) {
return {
'[extensibleFramework] [tabName=HDR][isTabView=true]': {
afterlayout: function() {
try {
document.getElementsByName( 'description')[0].style.width = '700px';
document.getElementsByName( 'equipmentdesc')[0].style.width = '700px';
return true;
} catch( err) {
return true;
}
}
}
}
}
}
}
);
I have a Kendo grid that I am using to display a typescript structure that looks like this.
{
companyId: string,
name: string,
inceptionDate: Date,
tags: string[]
}
I would like to be able to filter on the tags column, but I am unsure as to how this should actually work. I can quite easily filter on the name column, either with the built in grid filtering functionality or via code:
baseFilter.filters.push({ field: "name", operator: "contains", value: "myValue" });
But I don't see a way to do this against an array object. I would prefer to be able to select a tag from the a list in the grid filter option, but if that's not possible I'd be quite happy to use a multiselect and set the filter manually.
Is this something that is built in or that is relatively easy (or even just not insanely hard) to implement?
As long as you're doing the client side filtering, you can use a function for the operator field.
a simple example (in js):
baseFilter.filters.push({
field: "tags",
operator: function (tags, value) {
for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
if (tag === value)
return true;
}
return false;
}});
TerminalSamurai's answer did the trick for me !
Here is my full code (with checking if there is already a filter existing)
var grid = $("#GridListeModelesDocumentPatient_#Model.PatientId").data("kendoGrid");
if (grid != null) {
var filterHandler = grid.dataSource.filter();
if (dataItem.Nom == "Tous") {
if (filterHandler != null) {
var existingFilters = filterHandler.filters;
for (var i = existingFilters.length - 1; i >= 0; i--) {
if (existingFilters[i].field == "ModelesMotifs") {
existingFilters.splice(i, 1);
}
}
grid.dataSource.filter(existingFilters);
} else {
grid.dataSource.filter({});
}
} else {
if (filterHandler != null) {
var existingFilters = filterHandler.filters;
for (var i = existingFilters.length - 1; i >= 0; i--) {
if (existingFilters[i].field == "ModelesMotifs") {
existingFilters.splice(i, 1);
}
}
var new_filter = {
field: "ModelesMotifs",
operator: function (modelesMotifs, value) {
for (var i = 0; i < modelesMotifs.length; i++) {
var modeleMotif = modelesMotifs[i];
if (modeleMotif.MotifId === value)
return true;
}
return false;
},
value: dataItem.MotifId
};
existingFilters.push(new_filter);
grid.dataSource.filter(existingFilters);
} else {
grid.dataSource.filter({
field: "ModelesMotifs",
operator: function (modelesMotifs, value) {
for (var i = 0; i < modelesMotifs.length; i++) {
var modeleMotif = modelesMotifs[i];
if (modeleMotif.MotifId === value)
return true;
}
return false;
},
value: dataItem.MotifId
});
}
}
}
I use PrimeFaces SelectOneMenu advanced. Filter is wrong working when I input the i and ı character.
For example http://www.primefaces.org/showcase/ui/input/oneMenu.xhtml demo advanced one menu I search arI and arİ strings and it finds Aristo element.
In my application, my menu contains Isparta element. I input Isp and İsp and filter finds Isparta.
How can I solve this problem?
I resolve this problem with autocomplete component. Primefaces autocomplete component with dropdown="true" property works like one menu and this component don't have Turkish character problem.
Reported to PrimeFaces Team: https://github.com/primefaces/primefaces/issues/9629
Fixed for 13.0.0 but MonkeyPatch provided here:
if (PrimeFaces.widget.SelectOneMenu) {
PrimeFaces.widget.SelectOneMenu.prototype.normalize = function(string, lowercase) {
if (!string) return string;
var result = string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
return lowercase ? result.toLowerCase() : result;
}
PrimeFaces.widget.SelectOneMenu.prototype.filter = function(value) {
this.cfg.initialHeight = this.cfg.initialHeight || this.itemsWrapper.height();
var filterValue = this.normalize(PrimeFaces.trim(value), !this.cfg.caseSensitive);
if (filterValue === '') {
this.items.filter(':hidden').show();
this.itemsContainer.children('.ui-selectonemenu-item-group').show();
} else {
var hide = [];
var show = [];
for (var i = 0; i < this.options.length; i++) {
var option = this.options.eq(i),
itemLabel = this.normalize(option.text(), !this.cfg.caseSensitive),
item = this.items.eq(i);
if (item.hasClass('ui-noselection-option')) {
hide.push(item);
} else {
if (this.filterMatcher(itemLabel, filterValue)) {
show.push(item);
} else if (!item.is('.ui-selectonemenu-item-group-children')) {
hide.push(item);
} else {
itemLabel = this.normalize(option.parent().attr('label'), !this.cfg.caseSensitive);
if (this.filterMatcher(itemLabel, filterValue)) {
show.push(item);
} else {
hide.push(item);
}
}
}
}
$.each(hide, function(i, o) {
o.hide();
});
$.each(show, function(i, o) {
o.show();
});
hide = [];
show = [];
//Toggle groups
var groups = this.itemsContainer.children('.ui-selectonemenu-item-group');
for (var g = 0; g < groups.length; g++) {
var group = groups.eq(g);
if (g === (groups.length - 1)) {
if (group.nextAll().filter('.ui-selectonemenu-item-group-children:visible').length === 0)
hide.push(group);
else
show.push(group);
} else {
if (group.nextUntil('.ui-selectonemenu-item-group').filter('.ui-selectonemenu-item-group-children:visible').length === 0)
hide.push(group);
else
show.push(group);
}
}
$.each(hide, function(i, o) {
o.hide();
});
$.each(show, function(i, o) {
o.show();
});
}
var firstVisibleItem = this.items.filter(':visible:not(.ui-state-disabled):first');
if (firstVisibleItem.length) {
this.highlightItem(firstVisibleItem);
PrimeFaces.scrollInView(this.itemsWrapper, firstVisibleItem);
}
if (this.itemsContainer.height() < this.cfg.initialHeight) {
this.itemsWrapper.css('height', 'auto');
} else {
this.itemsWrapper.height(this.cfg.initialHeight);
}
this.alignPanel();
}
};
From PrimeFaces 13 normalization can be applied on both the item label and the filter value by setting the filterNormalize attribute to true. You can do the same in older versions using a filterFunction. For example:
<script>
function searchable(string) {
return !string ? '' : string.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
}
function customFilter(itemLabel, filterValue) {
return searchable(itemLabel).includes(searchable(filterValue));
}
</script>
<p:selectOneMenu filter="true" filterMatchMode="custom" filterFunction="customFilter"
.../>
See also:
https://primefaces.github.io/primefaces/12_0_0/#/components/selectonemenu?id=filtering
I have a view that is loaded with a blank viewmodel initially. I want to populate that already rendered view with a json object (obtained view ajax post) that was based off the viewmodel for that view.
Is there a way of automatically doing this?
Is there a way of doing it in reverse? (fields to matching viewmodel json object)
The only way I am aware of taking data return from an ajax call and putting it in a field is manually
$('#TextField1').val(result.TextField1);
etc..
to send it back to the controller you can do
data: $('form').serialize(),
this will take all of the fields in that form and send them back to the controller
Ok it looks like this will suit my needs.
I need to follow a convention of naming containers the same name as their respective properties as well as putting a class on them to indicate that they contain subfields.
function MapJsonObjectToForm(obj, $container) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var $field = $container.find('#' + key);
if ($field.is('div')) {
MapJsonObjectToForm(obj[key], $field);
} else {
if (obj[key] == null) {
if ($field.hasClass('select2-offscreen')) {
$field.select2('val', '');
$field.select2().trigger('change');
} else {
$field.val("");
}
} else {
if ($field.hasClass('select2-offscreen')) {
$field.select2('val', obj[key]);
$field.select2().trigger('change');
} else {
$field.val(obj[key]);
}
}
}
}
}
}
function MapFormToJsonObject(containerid) {
var obj = {};
$('.dataitem').each(function () {
var exclude = "s2id";
if ($(this).attr("ID").substring(0, exclude.length) !== exclude) {
var parents = $(this).parents(".has-sub-fields");
if (parents.length > 0) {
obj = FindParents(obj, parents.get(), $(this).attr("ID"), $(this).val());
} else {
obj[$(this).attr("ID")] = $(this).val();
}
}
});
return obj;
}
function FindParents(obj, arr, id, value) {
if (arr.length == 0) {
obj[id] = value;
return obj;
}
var parentID = $(arr[arr.length - 1]).attr("ID");
arr.pop();
if (obj[parentID] == null) {
obj[parentID] = {};
}
obj[parentID] = FindParents(obj[parentID], arr, id, value);
return obj;
}
How can I validate only certain attributes on a model? Currently I check if the attribute exists in the object passed into validate:
validate: function(attrs) {
// Number
if (attrs.minimum) {
if (isNaN(attrs.minimum)) {
return -1;
}
}
if (attrs.maximum) {
if (isNaN(attrs.maximum)) {
return -1;
}
}
}
but if I want to validate string value then:
if (attrs.mystring) {
// Do validation
}
would fail and the validation never takes place.
Backbone now supports the has property. So you can do something like that:
var Person = Backbone.Model.extend({
defaults: {
"name": "Kevin",
"age" : 26,
"job" : "web"
},
validate: function(attrs, options) {
for(k in attrs) {
if(!this.has(k)) {
return k + ' attribute is not exist';
}
}
}
});
var person = new Person;
person.on("invalid", function(model, error) {
console.log(error);
});
Im a little confused by your wording, but I think you want to check if its not an empty string first? and also work out the possibility that it is undefined..if so then this is what you'll want to do..
validate: function(attrs) {
// Number
if (attrs.minimum) {
if (isNaN(attrs.minimum)) {
return -1;
}
}
if (attrs.maximum) {
if (isNaN(attrs.maximum)) {
return -1;
}
}
if (typeof(attrs.mystring) != "undefined"){
if (!attrs.mystring){
return -1;
}
}
}
if you want to only validate one of your attributes, you should write your validate function to accommodate the options accordingly
validate: function(attrs, option) {
if (!option){
// Number
if (attrs.minimum) {
if (isNaN(attrs.minimum)) {
return -1;
}
}
if (attrs.maximum) {
if (isNaN(attrs.maximum)) {
return -1;
}
}
if (!attrs.mystring){
return -1;
}
}else{
switch(option){
case("string"):
if (!attrs.mystring){
return -1;
}
break;
case("number"):
// Number
if (attrs.minimum) {
if (isNaN(attrs.minimum)) {
return -1;
}
}
if (attrs.maximum) {
if (isNaN(attrs.maximum)) {
return -1;
}
}
break;
}
}
}
there are many ways to do this, this probably being the least efficient lol but using your example, it will do the job.
also, this isn't really a backbone.js problem per say...but general js