Polymer 1.x: How to filter iron-data-table? - polymer

How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)
I forked this plunk. Then I tried to add a filter by adding the following line:
<iron-data-table
...
filter="['item.user.name.first.length', '< 5']">
Which broke the plunk. Here is the new (now broken) plunk.
The documentation here describes the filter attribute as follows:
filter An array containing path/filter value pairs that are used to filter the items.
But it lacks an example of how to use it.
How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)

This isn't a very well documented feature:
Normally, you would go about using filter-by and filter-value properties in <data-table-column> elements, but you can also access the filter property directly.
When it comes to filtering items data source, there is only "contains" kind of filtering available. So, you pretty much can't do filtering based on string length like in your Plnkr with those. For more custom filtering functionality, you need to go using a function dataSource where you can do anything you want using the filters provided as arguments for the data source function.
Anyways, in case you want still to access filter directly and for example provide a default filtering value, you need to set the value to be an array of objects, which have a path and filter property:
this.filter = [{path: 'user.name.first', filter: 'donna'}];
Here's an example: http://plnkr.co/edit/KIefwLNHeinkOgERWOvZ?p=preview

Related

concatenate variables in angular property element

I comment, and looked here and I can not find the solution, my problem is the following:
in my html template in angular, I need to pass a series of data to the metadata property of a button, I can't get the correct way to successfully concatenate the variable that contains the value.
this should be the html element:
<mati-button clientId="clientId" flowId="flowId" color="green"metadata='{"user_id":"1234778","email":"som#som.com"}'/>
I tried several ways but I can't insert the respective values....
example:
<mati-button metadata='{"userID": "{{user.id}}" }'></mati-button>
unsuccessfully...
Assuming mati-button is an Angular component with metadata as Input(), you are probably looking for
<mati-button
[clientId]="clientId"
[flowId]="flowId"
[color]="green"
[metadata]="{ userId: '1234778', email: 'som#som.com'}"
></mati-button>
See the guide on property binding to learn more:
To bind to an element's property, enclose it in square brackets, [], which identifies the property as a target property. [...] The brackets, [], cause Angular to evaluate the right-hand side of the assignment as a dynamic expression. Without the brackets, Angular treats the right-hand side as a string literal and sets the property to that static value.
By "dynamic expression" they mean JS-expressions, i.e., a public variable available through the component's TypeScript, a boolean expression, an array, or, like in your case, a JS-object that you can construct inline.
You can try doing this
<mati-button metadata="{'userID': user.id }"></mati-button>
metadata='{" userID ": {{user.id}}}'
in the end I got it. Apparently I don't know why, but the third-party script hides that parameter and it couldn't be debugged in the console, but it does receive them without any problem! Thanks everyone for your help!

How to select from a selection box with a variable in the name?

I am having trouble using selecting from this select element.
<select name="vehicle_attrs[position_count]" class="mb1"><option>Position / Quantity</option><option>Front</option><option>Rear</option></select>
I have tried
select('Front', :from=>'mb1')
select('Front', :from=>'vehicle_attrs[position_count]')
select('Front', :from=>'vehicle_attrs[1]')
All of them result in a can not find selection box error
I've never liked how restrictive Capybara's concept of a 'locator' is (i.e. must have a name/id/label), but if you dig into the source code, those helpful methods like select, click_on, and fill_in are just wrappers for find and some native method of Element, which takes arbitrary CSS, and works in almost all situations. In this case, you could use:
find('[name="vehicle_attrs[position_count]"]').find('option', text: 'Front').select_option
Since dropdowns often have multiple similar options, where one is a substring of the other, you might consider using an exact string match, like
find('[name="vehicle_attrs[position_count]"]').find('option', text: /\AFront\z/).select_option
From the docs for select - https://www.rubydoc.info/github/teamcapybara/capybara/Capybara/Node/Actions#select-instance_method - we can see that the from option takes "The id, Capybara.test_id atrtribute, name or label of the select box".
Neither 'mb1' or 'vehicle_attrs[1]' are any of those so they would be expected to fail.
'vehicle_attrs[position_count]' is the name so assuming the box is actually visible on the page (not replaced with a JS driven select widget, etc), that should work. If it doesn't, then edit your question and add the full exact error message you get when trying to use it. Of course if there is only one select box on the page with an option of 'Front' then you don't need to specify the from option at all and can just do
select 'Front'

Why 'ng-attr-' can't be used with attribute 'multiple'?

I'm trying to make a <select> behave with single or multiple selection depending on a condition. So far I have tried:
<select
ng-model="data.model"
ng-attr-multiple="{{myCondition ? '' : undefined}}">
(here's a plnkr I have been testing with https://plnkr.co/edit/ACKBMZSJc2MVSJaDBGMY?p=preview)
But it won't work. Even leaving ng-attr-multiple alone won't work. What am I missing here?
https://docs.angularjs.org/error/$compile/selmulti
Binding to the multiple attribute of select element is not supported
since switching between multiple and single mode changes the ngModel
object type from instance to array of instances which breaks the model
semantics.
If you need to use different types of select elements in your template
based on some variable, please use ngIf or ngSwitch directives to
select one of them to be used at runtime.

Angular - Setting value in input text box in another component

I am trying to set the value in an HTML input text box which is a part of ComponentA from the typescript code which is a part of ComponentB.
Taking a clue from this SO i tried doing:
(<HTMLInputElement>document.getElementById("name")).value = response.name;
But this is not working. Is there anything else i need to take care of?
EDIT: The element with Id "name" is in ComponentA and the above code that is trying to manipulate that element is in ComponentB
If you are trying to set the value of component1's textfield from the compoenent2 then you must have to use of ngModel i.e two way data binding. by providing component2 in the providers list you are able to access all the functions and variables of that component, then you can easily set your value. like this
suppose this is your component 2's value property
name:string = 'Pardeep Jain';
than you can access this in component like this-
<input type="text" [(ngModel)]='name'>
....
constructor(private delete1: Delete){
this.name = this.delete1.name;
}
Working Example
Also
(<HTMLInputElement>document.getElementById("name")).value = response.name;
is used to set the value of current template's field with id named as **name**
This is one of the cases when user interaction on one component ComponentA triggers an update on another component ComponentB.
This article describes multiple approaches, with example code, on how to pass information between components.
My personal favorite is the third approach mentioned in that article in which one of the component (say ComponentA) "listen" for update it is concerned about from any component (say ComponentB) via a service in between them, resulting in a loosely coupled components.
For more approaches here is another link.

Displaying and intrepreting tab layouts

I would like to know if it is possible to 'see' and display the following tab layout maybe through the Attribute Editor etc?
Or how can I interpret it?
In the following, I selected the shader - ShaderParam_resGen_srf01 but after searching through every attributes I can find in the Attribute Editor, I can neither find the CachedLayouts or the ShaderParamTabDepth elements.
Any ideas?
tabLayout -e -selectTabIndex 1"MayaWindow|MainAttributeEditorLayout|formLayout2|AEmenuBarLayout|AErootLayout|AEStackLayout|AErootLayoutPane|AEbaseFormLayout|AEcontrolFormLayout|AttrEdrexShaderSrfFormLayout|scrollLayout121|columnLayout971|frameLayout522|columnLayout976|columnLayout977|MW_ShaderParam_CachedLayouts|MW_ShaderParam_resGen_srf01|ShaderParamTabDepth0";
tabLayout is a UI element, not part of your scene.
From the documentation, this command is selecting the first tab of the specified tab layout control.
The long string is the "path" to the control:
MayaWindow
MainAttributeEditorLayout
formLayout2
AEmenuBarLayout
AErootLayout
AEStackLayout
AErootLayoutPane
AEbaseFormLayout
AEcontrolFormLayout
AttrEdrexShaderSrfFormLayout
scrollLayout121
columnLayout971
frameLayout522
columnLayout976
columnLayout977
MW_ShaderParam_CachedLayouts
MW_ShaderParam_resGen_srf01
ShaderParamTabDepth0
Depending on what you intend by "interpreting tab layouts," other commands listed in the documentation linked above should help you collect the specific information you need. If there's a particular aspect of the layout you want to query, be sure to specify that in your question.