i am creating a web app in which i want to see my record on different textboxes
[{"attendee1":"o","attendee2":"p","totalmale":"2","totalfemale":"2","unit1":"o","unitd1":"o","unit2":"o","unitd2":"o","unit3":"o","unitd3":"o","unit4":"o","unitd4":"o","unit5":"o","unitd5":"o","remarks":"o"}]
this is how my records are coming from webservice when i supply a parameter((string id)) how i need to retrieve the record and show the record on my textbox with the help of AngularJS
this is my js file
$http.get('/frmattendencerptqed.asmx/getuprec', {
params: {
id: $scope.updateparam.comsonvinid
}
})
now what i need to do when i want to print the records in different textboxes
my textboxes are in input field
<input type="text" ng-model="attendee1" />
this is how all my textboxes are
i need your help what i need to do when i want to show the record on my textboxes
According to the data you provided i made small example for you.in this you need to assign your result to a scope variable like below
$scope.something=your result;
from this fetch your value and assign to your model,here i am taking attendee1 and assigning to model
$scope.attendee1=$scope.something[0].attendee1;
like this you need to give what ever you want from that result.
Demo
Related
I am trying to create exactly same form given in this fiddle
steb by step angular form
but whenever i click on the next button data entered in the first step resets.. how can i prevent this? On submit all data is undefined while reading in javascript.
Please help me..
In the JsFiddle code you provided you are not retaining the users data, meaning that data is being Binded to anything in the controller. So when leave the section the data is removed.
To retain data make the following changes:
// In your controller add the following object to the $scope
$scope.user = {}
// In your HTML code add the following to your input fields
<input type="text" id="teamName" ng-model="user.teamName" placeholder="Team Name" />
Notice the ng-model tag in the input field this is what binds your data to the user object within your controller
Heres a working JsFiddle, please note that I only updated the Team Name field. Type something in the Team Name field and go to the next section and it will retain your data. You will need to update the remaining fields.
I've got a json file that generates the form definitions for each specific form. In the view - I spit out the data something like this
<input ng-data-model="data[value2.Id]" placeholder="{{value2.Label}}" type="text" />
<button ng-click="send_form()" >Submit</button>
In my controller, I've got the following function
$scope.send_form = function() {
alert($scope.data);
}
When the send_form function is called - i get "undefined" returned back. My question is, how do i handle dynamic form data in Angular JS and get each of the values inserted by the user? Is there a way to get a key/value pair set of data returned? with the ng-data-model has the key and the value inserted by the user as a user? Or how would i handle this specific scenario? Any help would do :)
Thanks :)
It's just ng-model to bind your input to your scope variable. Or you can use data-ng-model for compliance. Other than that it should work if your data is set up - might help to show an example of how it looks.
Here's a fiddle with some dummy data:
https://jsfiddle.net/ba0pj6sv/
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)
I am having a problem binding data retrieved from the server to a drop down list. The main issue I think is the fact that the comparison is done on differing object types.
For example:
1. The object returned from the server contains a currency code string. we want this to be bound to an item in the dropdown list
"baseCurrencyCode":"GBP"
The view model returns the list of currencies.. These are returned as a list of currency objects with different properties
{"currencies":[{"id":1,"rateId":0,"abbreviation":"AFN","description":"Afghani","rate":0.0,"rateDescription":null,"languageCode":"en-gb","isDefault":true,"fullDescription":"AFN - Afghani - ","shortDescription":"AFN - Afghani"}}
etc.
Currently, I have got this working by writing a function to go through every property for every item in the list, find the correct property we wish to compare to - do the comparison and then return the initial selection.
When calling my save method I then need to manually bind the currency abbreviation to the object I wish to return to the server.
Surely there must be a better way to do this?
Some of my code for reference..
<select ng-model="selectedCurrency" ng-options="currency.shortDescription for currency in viewModel.currencies"></select>
// Call to my custom method..List, PropertyName, value to compare
$scope.selectedCurrency = InitialiseDropdown($scope.viewModel.currencies, "abbreviation", $scope.updatedObject.baseCurrencyCode);
// Code executed when saving - to bind the currency to the updated object
$scope.updatedObject.baseCurrencyCode = $scope.selectedCurrency.abbreviation;
Any help is appreciated!
EDIT
Sorry if I wasn't clear enough.. To summarise..
The main problem here is binding to the drop down and initial selection.
The object we are updating contains a parameter (string) of the currency abbreviation.
The list we select from is a list of currency objects. As these are two differing object types I have been unable to plug in angulars 2 way binding and have written some code to do this on initial retrieval and when saving.
The cleanest way to fix this would be to return a currency object in our retrieval instead of a simple string of the abbreviation, but this is not an option.
Is there a better way of enabling 2 way binding on different object types ?
Thanks again
It is not exactly clear what the problem is, but you can save yourself some work by binding the <select> to the currently selected currency object (so you don't have to look it up later).
select + ngOptions allow you to bind to one value while displaying another, with the following syntax:
<select ng-model="selectedCurrency"
ng-options="currency as currency.shortDescription
for currency in viewModel.currencies">
</select>
In the above example, $scope.selectedCurrency will be bound to the whole currency object, but currency.shortDescription will be displayed in the dropdown.
See, also, this short demo.
UPDATE:
In case you don't need to bind to the whole currency object, but just bind updatedObject's baseCurrencyCode property to the abbreviation of the selected (in dropdown) currency, you can do it like this:
<!-- In the VIEW -->
<select ng-model="updatedObject.baseCurrencyCode"
ng-options="c.abbreviation as c.shortDescription
for c in currencies">
</select>
// In the CONTROLLER
$scope.currencies = [...];
$scope.updatedObject = {
...
baseCurrencyCode: <baseCurrencyCodeFromServer>
};
See, also, that short demo.
I have had the same problem, ng-model and ng-option being from 2 different sources. My ng-model is bound to a value in a json object representing a chosen filename and my ng-option is a list of possible values taken from a csv file.
In the controller I am reading a directory via a Nodejs route, and creating a json array of filenames like this
var allCsvFiles = [{"name":"file1.csv"},{"name","file2.csv},etc..]
The current csv file, i.e. the selected one is stored in another json array
[{"date":"01-06-2017","csvfile":"file1.csv","colour":"red"},{...}, etc].
I was using the following code for the dropdown:
<select type="text" ng-model="file.csvfile"
ng-options="opt.name for opt in allCsvFiles track by opt.name"></select>
Which caused the current selection to be blank and if I selected an item from the dropdown it put [object],[object] as the current selection. If I stepped through the code I found that it seemed to be selecting {"name","file1.csv"} as the option and couldn't display it, this seemed odd as my ng-options selection looks like it should just return the value of "name" not the array entry. I tried many different ways to make this work but eventually I found that if I made the list of possible selections a plain javascript array:
var allCsvFiles = ["file1.csv","file2.csv", "file3,csv]
and changed the select to:
<select type="text" ng-model="file.csvfile" ng-options="opt for opt in allCsvFiles"></select>
then the dropdown selection worked as expected.
I may have missed some other obvious solution here, but as the array of json objects is one dimensional anyway it doesn't seem to be an issue.
It looks like the OPs question has been answered, I just thought I'd add this as it solved it for me.
My UI has a batch editable grid with column called Rank and fixed number of records ( say 5 records and no paging ). The field Rank has to be validated and should always input in the ascending order ( say 1,4,6 7, 9). These inputs has to be validated before submitting and would like to show in-line validation message against the edited cell.
I tried following
Using [Remote] validation attribute, but no way to pass the entire grid data.
Using OnSave client event, not sure how to add the in-line validation messages
Any suggestion on this would be greatly appreciated,
-George
Try adding this jquery.validate.unobtrusive.min.js Javascript reference in your view page. And the remote validation will exactly post all the input parameters to the action method. There you can return either true or false.
In order to pass the entire grid data using [Remote] validation attribute, you have to make the grid data in this format for each data:
<input name="col1" value="col1_Value">
The name "col1" must be match as a parameter in your controller, so that the value can be passed.
You can achieve this by doing a little trick using jquery.