I have (a seemingly common) problem with empty option values an angular model viewed using a select using ng-options.
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: null },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
<select ng-model='form.groupType' required ng-options='option.value as option.name group by option.group for option in groupTypeOptions'></select>
A fiddle can be seen here:
http://jsfiddle.net/v6z3zh49/
My goal is to, from a predefined model, show a grouped select with the selected item representing null (or empty string). However, when selecting a value and I always end up with an extra, empty, option element being added. See fiddle above.
I have looked at similar questions, for example here and here, but cannot find a solution.
Any tips?
Try:
$scope.groupTypeOptions = [
{ group: 'g1', name: '---', value: undefined },
{ group: 'g2', name: 'Feature', value: 'feature' },
{ group: 'g2', name: 'Bug', value: 'bug' },
{ group: 'g2', name: 'Enhancement', value: 'enhancement' }
];
It happens because in javascript null !== undefined.
Hope, it will help.
Demo: http://jsfiddle.net/ababashka/skk4uj1y/
Related
I'm trying to implement a categories input with this data returned from my DB
[
{
_id: '63e59f91bd2a21368188ff4b',
title: 'Uncategorized',
slug: 'uncategorized',
categoryType: 'blog',
createdAt: '2023-02-10T01:36:17.704Z',
updatedAt: '2023-02-10T01:36:17.704Z',
},
{
_id: '63e5984028745af5bad2c015',
parentCategory: {
_id: '63e5974a786719dd4bb2d37b',
title: 'Projects',
},
title: 'YTDownloader',
slug: 'ytdownloader',
categoryType: 'blog',
createdAt: '2023-02-10T01:05:04.919Z',
updatedAt: '2023-02-10T01:05:04.919Z',
},
{
_id: '63e597c3786719dd4bb2d387',
parentCategory: {
_id: '63e5974a786719dd4bb2d37b',
title: 'Projects',
},
title: 'Song Finder',
slug: 'song-finder',
categoryType: 'blog',
createdAt: '2023-02-10T01:02:59.742Z',
updatedAt: '2023-02-10T01:02:59.742Z',
},
]
What I'm trying is to create the example given in the documentation since my categories are pretty much 'parents' or 'childrens' and don't want to have them unorganized.
So far this is what I've been trying but to not success:
<Select
placeholder="Select category"
defaultValue={category}
onChange={(e) => {
setObjectData({
...objectData,
category: e,
})
}}
value={category}
options={[
categories.map((c, i) => [
{
label: c.parentCategory ? c.parentCategory.title : c.title,
},
]),
]}
/>
This returns literally nothing, not even an error. What I was expecting is the following:
<Select
defaultValue={category}
onChange={(e) => {
setObjectData({
...objectData,
category: e,
})
}}
value={category}
options={[
{
label: 'Projects',
options: [
{
label: 'YTDownloader',
value: '63e5984028745af5bad2c015',
},
{
label: 'Song Finder',
value: '63e597c3786719dd4bb2d387',
},
],
},
{
label: 'Uncategorized',
value: '63e59f91bd2a21368188ff4b'
],
},
]}
/>
Has anyone done something like this before? It will be great if you guys can help me solve this little issue that's been giving a headache for the last 2 hours, LOL
My guess would be you have only passed objects to options that only have a label and no value. This is speculation, but it's possible nothing is rendered in the dropdown if there is no corresponding value to each label.
The label, which is what the user sees for each option, isn't necessarily its underlying value.
Keep in mind the value is ultimately the thing that will be passed to onChange, so to only have a label with no value could explain why it just does nothing -- because a valid option must have a value.
Map each option such that its value represents that option uniquely:
categories.map((c, i) => [
{
label: c.parentCategory ? c.parentCategory.title : c.title,
value: c._Id
},
]),
I was populating v1 with a data structure like:
[{"label":"email","resource_type":"Email","options":[{"label":"Desc","value":1}]},{"label":"survey","options":[{"label":"HXH","value":3}]
And then populating another select with nested options. But now v2 auto populates the select with opt groups because of the nested option key of my json. How do I disable that?
There doesn't seem to be anything in react-select to disable the grouping but you could map your options before passing them into react-select so that it only includes the relevant data.
const originalOptions = [
{ label: 'email', resource_type: 'Email', options: [{ label: 'Desc', value: 1 }] },
{ label: 'survey', options: [{ label: 'HXH', value: 3 }] },
];
<Select
options={originalOptions.map(option => {
return { label: option.label, value: option.value };
})}
/>
I'm using the new 2019 paypal sdk with React and I'm trying to create an order with 2 line items. When I create an order, I'm able to get the correct total inside paypal and complete a transaction, but on the test users receipt, it just shows the total for 25.99 and no line items. I'm following v2 of their api instructions but no items are showing up.
purchase_units: [{
amount: {
currency_code: 'USD',
value: '25.99',
breakdown: {
item_total: { value: '25.99', currency_code: 'USD' }
}
}
}],
items: [
{
name: 'Watercolor texture kit Vol. 1',
unit_amount: {
value: '16.00',
currency_code: 'USD'
},
quantity: '1',
description: 'test desc',
sku: '222'
},
{
name: 'Skinny jeans',
unit_amount: {
currency_code: 'USD',
value: '9.99'
},
quantity: '1',
description: 'test desc',
sku: '30'
}
],
I know this is old, I had a similar problem. I think the items need to be inside the purchase_units. I also found to work that I need to include the descriptors in quotes - the API docs don't specify this though.
This is what I'm using to make it work:
<script id='paypal-js' src={`https://www.paypal.com/sdk/js?client-id=${PaypalKey}&disable-funding=credit,card&commit=true&merchant-id=${PaypalMerchantId}&locale=en_US&integration-date=2019-11-07`}/>
Integration date makes paypal use different versions of the api depending on the date.
purchase_units: [{
amount: {
currency_code: currency,
value: cart.totalPrice,
breakdown: {
item_total: {
value: cart.totalPrice,
currency_code: currency
}
}
},
invoice_id: Math.random().toString(36).substring(14),
items: getPaypalFormatItems(cart, products),
soft_descriptor: 'Digital Purchase', // appears on CC statement
description: 'Paypal payment'
}],
application_context: {
brand_name: 'Every-Tuesday',
shipping_preference: 'NO_SHIPPING',
user_action: 'PAY_NOW'
}
I am trying to use Ui-grid from this link
http://ui-grid.info/docs/#/tutorial/101_intro.
I make a simple example of ui-grid in plunker..I need to add select box on "Gender" as filter .If I select "male" it show only data who is "m or If I select "female" it show filter data only "f" value here is my code
Plunker https://plnkr.co/edit/DqBgHFnwLpYM5pvg0f56?p=preview
I try like that but not work
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
I don't need input field on gender .I need select box or dropdown on gender column
First you need to add uiGridConstants as parameter in your controller declaration, so you can use it. Then, you will be able to do what you want.
angular.module('app',['ngTouch', 'ui.grid'])
.controller('MainCtrl',function( $scope, uiGridConstants ){
// ...
$scope.gridOptions = {
enableFiltering: true,
columnDefs: [
{
field: 'gender',
displayName:'Gender',
filter: {
type: uiGridConstants.filter.SELECT,
selectOptions: [
{ value: 'm', label: 'male' },
{ value: 'F', label: 'female' }
];
}
},
{field: 'name', displayName:'First'},
{field: 'lastname', displayName:'Second',enableSorting: false}
]
};
// ...
}
I'll give you an advice : to debug angular code, or any javascript code, use a tool like Firebug (for Mozilla Firefox). It will show you the javascript errors encountered when you change your code and plunker try to apply it. In this case, you would have seen this :
Error: uiGridConstants is not defined
#https://run.plnkr.co/8CvvTtAR4QY8O2Ln/app.js:30:11
I have an object array where every object can have an array of properties, like this
[
{
name: 'Big house',
properties: [{name: 'Area',value: '400'}, {name: 'Year',value: '1950'}]
},
{
name: 'Small house',
properties: [{name: 'Area',value: '400'}, {name: 'Year',value: '1950'}]
},
{
name: 'Green house',
properties: [{name: 'Area',value: '40'}, {name: 'Year',value: '2008'}]
},
{
name: 'Red house',
properties: [{name: 'Area',value: '250'}, {name: 'Year',value: '1999'}]
},
];
Now I'd like to order this list by one of the properties, say Area, using a filter in ng-repeat. Is that possible?
I've been play around with this in plunker (http://plnkr.co/edit/GEgLxv5zJyW0ZBTtJR5S?p=preview) but cannot figure out how to do.
Thanks in advance
This will work if the area is always the first property:
<tr ng-repeat="house in houses | orderBy:'properties[0].value'">
Also make sure that the area is defined as an integer, right now they are strings. So 250 will be sorted before 40.
So remove the quotes from the numbers:
{
name: 'Area',
value: 400
}
, {
name: 'Year',
value: '1950'
}