in polymer can I do that. How I can read val in my polymer. I create c# project I need write polymer values from server and I not need write my values inside polymer attrs I have complex text in values it may be break polymer attrs so I not need do this way.
<ctr-textbox name="Name">
<val>joman mahmoud</val>
</ctr-textbox>
my polymer is
<template>
<input type="text" dir="auto" name="{{name}}" value="{{value}}" class$="{{fnJoin('form-control ', class)}}" />
</template>
<script>
Polymer({
is: "ctr-textbox",
properties: {
type: {
type: String,
value: "ctr",
reflectToAttribute: true
},
name: {
type: String,
value: "",
reflectToAttribute: true
},
class: {
type: String,
value: '',
reflectToAttribute: true
},
value: {
type: String,
value: ''
}
},
ready: function () {
}
});
</script>
Related
I want to insert a new object inside the options which is an array property inside the select1 object every time the user clicks on add button, how can I achieve this target, pls reply to this query.
I want to build a simple application where a user enters the options in the select box and can apply conditions based upon the selected option.
const [select1, setSelect1] = useState({
id: uuid(),
type: 'select',
properties: {
label: 'Select1',
options: [
{
id: uuid(),
label: 'text1',
value: {
labelTxt: 'text1',
childOptions: [],
},
},
{
id: uuid(),
label: 'text2',
value: {
labelTxt: 'text2',
childOptions: [],
},
},
],
},
parentId: null,
});
function addOptionsVal() {
setSelect1((prevState) => {
const options = [...prevState.properties.options];
options.splice(1, 0, {
id: uuid(),
label: optionVal,
value: {
labelTxt: optionVal,
childOptions: [],
},
});
console.log(options);
return { ...prevState, options };
});
}
return (
<div>
<select name="" id="">
<option value="">--select--</option>
{select1.properties.options.map((option) => {
return <option>{option.label}</option>;
})}
</select>
</div>
<input
type="text"
value={optionVal}
onChange={(e) => handleValueChange(e)}
/>
<button onClick={addOptionsVal}>Add options</button>
</div>
<div>
<input
type="checkbox"
value="male"
checked={checked}
onChange={toggleCondition}
id="condition"
/>
<label htmlFor="condition">Apply condition</label>
</div>
)
This is the entire code file in case you need
Try this:
function addOptionsVal() {
setSelect1((prevState) => {
return {
...prevState,
properties: {
...prevState.properties,
options: [
...prevState.properties.options,
{
id: uuid(),
label: optionVal,
value: {
labelTxt: optionVal,
childOptions: [],
},
},
],
},
};
});
}
stackblitz
Also, take a look at this question Correct modification of state arrays in React.js
I followed this svelte tutorial and I wonder if I could do this group binding to a JSON array instead of simple array, for example I would like to do a planets selector:
<script>
let planets = [{
name: 'Jupiter',
enable: false
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:group={planets} name={planet.name} value={planet}>
{planet.name}
</label>
{/each}
This is a REPL. I wonder if there is a way how to properly bind JSON array (enable array field with inputs value) in svelte each loop. Now it pops out with each item as you click as you can see in REPL's console.log and I would like just to uncheck it.
With bind:checked property displays proper way
<input type=checkbox bind:checked={planet.enable} value={planet}>
But this does not change array.enable value on click. Can I achieve responsibility of planets array here?
I think the problem is that you set the value to planet. When you remove this and only use the checked property, then the array updates with the proper value.
<script>
let planets = [{
name: 'Jupiter',
enable: false,
},
{
name: 'Saturn',
enable: false
},
{
name: 'Uran',
enable: false
},
{
name: 'Neptun',
enable: false
},
{
name: 'Pluto',
enable: true
},
];
$: planets, console.log(planets)
</script>
{#each planets as planet}
<label>
<input type=checkbox bind:checked={planet.enable}>
{planet.name}
</label>
{/each}
You can checkout my REPL.
Here is a screenshot from the update:
I am using a bootstrap multiselect plugin by david stutz.
Here is my html
<select class="multiselect" name="multiselect[]" id="multiselect-employee" ng-model="taskData.AssignedId" ng-options="emp.Name for emp in employeelistoptions" multiple="multiple" multiselect-dropdown></select>
here is my script
$(document).ready(function () {
$('#add-new-task').on('click', function () {
$('#multiselect-employee').multiselect({
nonSelectedText: 'Select an employee!',
includeSelectAllOption: true,
enableFiltering: true
});
clearValues(scope);
});
});
employeelist options is a dynamic array which stores data
$scope.employeelistoptions =[ {
ProfileId:0 ,
Name: ""
}];
Now the multiselect doesn't works if employeelistoptions is used. but it works when some array like employeeList(Which is not dynamic) is used.
$scope.employeeList = [{
ProfileId: 1,
Name: "Antony"
}, {
ProfileId: 2,
Name: "Amal"
}, {
ProfileId: 3,
Name: "Sachin"
}];
How can i bind dynamic array data to multiselect?
EDIT: This is not a server-side problem. Please read the question carefully.
I am building a solution using Mongoose, Express, Node, and Angular. I am attempting to send my Mongoose schema file client side to be parsed. I have successfully acquired the data in an object in my controller script (client side,) structured like so:
{
href: {type: String},
text: {type: String, trim:true},
dropdown: {type: Boolean},
dropdownList: {type: Array}
}
This is passed through $scope.$apply (because it is being recieved in a callback,) and it is recieved in the HTML like this:
{
href: {},
text: {trim:true},
dropdown: {},
dropdownList: {}
}
Having the data types is extremely important for my implementation. Any thoughts?
If you don't care about monkey patching function object you can do this way.
Add following anywhere before your res.json code run in server or even in client browser.
Function.prototype.toJSON = function() { return this.name; }
Test with node
# node
> var schema = {
... href: {type: String},
... text: {type: String, trim:true},
... dropdown: {type: Boolean},
... dropdownList: {type: Array}
... }
undefined
> schema
{ href: { type: [Function: String] },
text: { type: [Function: String], trim: true },
dropdown: { type: [Function: Boolean] },
dropdownList: { type: [Function: Array] } }
> JSON.stringify(schema)
'{"href":{},"text":{"trim":true},"dropdown":{},"dropdownList":{}}'
> Function.prototype.toJSON = function() { return this.name; }
[Function]
> JSON.stringify(schema)
'{"href":{"type":"String"},"text":{"type":"String","trim":true},"dropdown":{"type":"Boolean"},"dropdownList":{"type":"Array"}}'
>
in your object your trying to assign something like String, Array, Boolean.. and note that those values are not string values these are only keywords. if u have numbers you can do like this, so you need to use those values as string values
{
href: {type: 'String'},
text: {type: 'String', trim:true},
dropdown: {type: 'Boolean'},
dropdownList: {type: 'Array'}
};
here is a demo
I'm working on a simple angular app with two controllers:
function Invite($scope) {
$scope.fieldsets =
[
{
fields:
[
{
label: 'First Name',
name: 'firstname',
key: 'entry.810220554',
type: 'text',
required: true
},
{
label: 'Last Name',
name: 'lastname',
key: 'entry.1653030831',
required: true,
},
{
label: 'Email',
name: 'email',
key: 'entry.1727688842',
required: true,
type: 'email',
},
{
key: 'entry.1602323871',
type: 'radio',
labels:
[
{
name: 'media',
label: 'Media'
},
{
name: 'frilans',
label: 'Frilans'
}
],
}
],
}
];
}
function Questionnaire($scope, $http){
$scope.post = function(){
console.log();
$http.post('/signup.php', $scope.quiz).
success(function(data, status, headers, config){
console.log(data);
});
};
}
The Questionare-scope is a child of the invite scope. Here is simplified version of the layout
<div ng-controller="Invite">
<form ng-controller="Questionnaire" method="POST" ng-submit="post()">
<input ng-model="{{field.key}}" />
</form>
</div>
The first one generates a form where I want the key-values to be used as ng-model.
In the second scope, so that I can post them to the server with that key.
I first tried to use
<input ng-model="{{field.key}}" />
in my html template, this was my intuitive guess, but it rendered an error.
<input ng-model="field.key" />
this also giving error.
Here is a plnkr:
http://plnkr.co/edit/rnQXlCCFQypVLs20OuTt?p=preview
There is no object fields in the questionnaire scope. You may be able to reference the object to in the outer scope by using ng-repeat=field in $parent.fields, I'm not sure if nested scopes are related via prototypical inheritance.
Another approach would be to create a service that tracks fields and inject it into all the controllers that need access to the data.