<input type="checkbox" ng-model="mail.email" name="email"
ng-true-value="'mail.email'" ng-false-value="'0'">
This is my code while im going to edit i need to fetch the value from database but if i click the checkbox it shows the following response
{
regid: "NADr333434",
email: "mail.email",
altemail: "mail.altemail",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}
I need the output as the follwing format how to get this
{
regid: "NADr333434",
email: "test#gmail.com",
altemail: "alternate#test.com",
htmlcontent: "<b>kuhiuhioh oih oihih</b>"
}
Related
I cannot get my reactjs component to reflect the actual changes in state on a checkbox. Could anyone kindly assist or point out what is wrong with my code below.
This is my state
state = {
data: {
name: "",
address: "",
city: "",
country: "",
mobile_number: "",
description: "",
has_conference: false,
star_rating: "",
},
errors: {},
};
This handle checkbox method
toggleChange = () => {
this.setState({
has_conference: !this.state.data["has_conference"],
});
};
And finally the checkbox code in render method
<label>
<input
type="checkbox"
has_conference={this.state.data["has_conference"]}
onChange={this.toggleChange}
/>
Conferencing
</label>
There are two things to correct in your code.
1: In toggleChange you dont change this.state.data.has_conference, but you change this.state.has_conference which is not exists in initial state. For changing this.state.data.has_conference you need to do following in your toggleChange function:
let data = this.state.data
data.has_conference = !data.has_conference
this.setState({data})
2: In you need to bind your this.state.data.has_conference value to the checked attribute. In code you need to write:
<input type="checkbox" onChange={this.toggleChange} checked={this.state.data.has_conference}
Hope this help.
How to modify so that we can use user input via empty fields on app rather than the current info...?
var dataObj = {
ID: "INFO226",
Name: "Application Development",
Overview: "An introduction to the use of software languages and tools for rapid application...",
Year: 2018,
Trimester: "1",
LectureTimes: "Thursday 12.40pm",
LecturerID: "1",
};
First of all, your question is not carrying the controller /html code snippet, so its really hard for me to understand what exactly you need here.
As per my assumption I am concluding your requirement and here is my answer to you..
Instead of var dataObj, use $scope.dataObj in controller.
In HTML,
<input type="text" ng-model="dataObj.ID" id="dataObjId"/>
<input type="text" ng-model="dataObj.Name" id="dataObjName"/>
<input type="text" ng-model="dataObj.Overview" id="dataObjOverview"/>
<input type="text" ng-model="dataObj.Year" id="dataObjYear"/>
and so on.
On submit of the form or on click of the Save button or so on your page, the dataObj scope is now modified with the user's input and can be submitted without pushing the data further.
I want to add a file/image field to my current field and save in pouchdb. Is there any cool way to handle this?
Here's what I have currently:
this.newInfo = {
id: uuid(),
createdAt: toDate(),
Info: {
name: '',
dob: '',
designation: ''
}
}
this.state = {
doc: this.newInfo
}
In another file:
submitInfo (event) {
event.preventDefault()
let Info = Object.assign({}, this.props.doc)
if (!Info._id) {
Info._id = Info.id
}
console.log('About to post to pouch...', Info._id)
// Save to pouchdb
this.db.put(Info , (err, result) => {
if (!err) {
console.log('Successfully posted to pouchdb!')
this.props.clearCurrentDoc()
} else {
console.log('Error saving to pouch...')
console.log(err)
}
})
}
The form:
<fieldset>
<legend>Info</legend>
<input name='name'
value={props['name']}
type='text'
placeholder='Enter Name'
onChange={handleChange}
/>
<input name='dob'
value={props['dob']}
type='date'
placeholder='Date of Birth'
onChange={handleChange}
/>
<input name='designation'
value={props['designation']}
type='text'
placeholder='Designation'
onChange={handleChange}
/>
</fieldset>
I want to add one more field for saving images. Maybe call it picture. Sorry, I can't put the entire code but everything else is working fine. I just need to add a field that will browse for image or file and save it with the existing ones.
I've got a good sample on jsbin that should help you to sort through this. There is an input button that let's you select an image and then submit this to PouchDB. If you are using CouchDB the code is also there to replicate the data to CouchDb. The general idea is to use something like this:
<input type="text" name="field1" />
<input type="text" name="field2" />
<input type="file" name="file" />
<script>
var field1= window.document.reportform.field1.value;
var field2= window.document.reportform.field2.value;
var inputFile = document.querySelector("#file");
getFile = inputFile.files[0];
var myDoc = {
_id: new Date().toISOString(),
field1: field1,
field2: field2,
_attachments: {
"file": {
content_type: getFile.type,
data: getFile
}
}
}
db.put(myDoc, function(err, response) {
if (err) {
return console.log(err);
} else {
console.log("Document created Successfully");
}
});
db.replicate.to(remote);
}
</script>
JSbin: PouchDB image select and put()
I have not been able to get to work. I have asked on stackoverflow and the PouchDB Slack channel. Some suggestions have been made but so far I haven't gotten it working.
The PouchDB documentation is very good. PouchDB Attachments Guide
I want to localise data in my edit form with the help of the directives.
Input should be:
<input translate data-locale="en_EN" type="text" class="form-control" ng-model="item.defaultTranslation.name">
My item object is:
{
itemTranslations: [
{ name: "item name", locale: "en_EN"}
]
}
How can I write a directive to display the localised data?
I am new to AngularJS and facing one problem with multiple check-boxes. I have one registration form in which I have choices of colors which comes from database.
$scope.ColorList = { { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }};
I am using below code to render checkbox in form.
<tr>
<td>Favorite Colors</td>
<td>
<label data-ng-repeat="c in item.ColorList">
<input type="checkbox" value="{{c.ID}}" /><span>{{c.Name}}</span>
</label>
</td>
</tr>
Now, during add operation, checkboxes renders properly... But how to bind checkboxes with model so that I get an array of selected checkboxes?
Also during edit time, I need to pre-select checkboxes to display user's saved choices.
So how to achieve it?
Thanks in advance.
I think most people would have used c as their model and then tied ng-model to some property on c. Then your list is really just item.ColorList
$scope.ColorList = [ { ID: 1,Name:"Red" },{ ID: 2,Name:"Green" },{ ID: 3,Name:"Blue" }];
<label data-ng-repeat="c in item.ColorList">
<input type="checkbox" ng-model="c.Active" value="{{c.ID}}" /><span>{{c.Name}}</span>
</label>
$scope.getSelected = function(item){
var results = [];
angular.forEach(item.ColorList, function(c){
if(c.Active){
results.push(c);
}
});
return results;
}