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.
Related
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!
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'
Im using Angular material's for multipe choice purpose like mentioned in their site https://material.angular.io/components/select/overview (8th example).
I also have an array of items (key and value) which are a part of the choices([key:1 value:extra cheese, key:2 value:onion])... I want them to be automatically selected (probably using formController) ... how can I do this?
plus, after the user selected/ unselectedsome options how do i get a new array back ?
thank you in advance!
you need to use ngModel
<mat-select placeholder="Toppings" [formControl]="toppings"
multiple [(ngModel)]='defaultValue'>
and define this defulatValue in your component like this, or programaticly as you wish
defaultValue = [this.toppingList[1], this.toppingList[3]]
and you can get this variable when anything changes, it will contain your selected values. Took this example from material example, all works fine for me.
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
today i had a discussion with my colleague. The question was whether to use the additonal value attribute for a single HTML checkbox or not.
My preffered way is using a single checkbox without a additional value attribute and in backend doing a check like if
if (request.getParameter(checkboxName) != null)) {
...
}
My colleague argues that is would be more transparent using a single checkbox with a additonal checkbox value attribute like value="true" and doing a backend check like
if (Boolean.valueOf(request.getParameter(checkboxName))) {
...
}
As we want to make a small convention about our internal checkbox handling im now trying to find a "best practise" but couldn't find yet. I saw so far only examples with multiple checkbox with the same name. In this case of course it makes sense for me to use different values.
For me it seems to be a bit overhead using a value attribute in case of a single checkbox since i get always a String with "on" if its activated/checked.
We are using a Java Servlet/JSP MVC environment and im not 100% sure if this "on" comes from ServletRequest.getParameter.
I see reasons for following either method, which means there's probably no noticable difference between them. Whichever you pick will work out fine; just make sure you pick one. You could flip a coin or do a thumbwar or something.
As long as a single approach is consistently used, both will work. Yours is less code and doesn't require boolean conversion, the other´s html is more consistent with multiple checkboxes but will also break if you put the wrong value for whatever reason.
You could always do a bit of both and insert values in html for clarity but check for != null in the code and get the best of both options.
It makes no difference server-side as long as you are not checking the parameter for having a specific value. By HTML5 definition, which just establishes the longstanding practice as the rule, a checkbox element has the value on by default. This means that your server-side code cannot distinguish between data coming from <input type=checkbox name=foo> and data coming from <input type=checkbox name=foo value=on>.