I am creating a dynamic form from angular in index.html using ng-repeat over an array of JSON object. On submit button, I need to pass form data into a post request in form of a map like :
{"key":value,"key":value}
The key is dynamic label generated in the form and value is the input from a text field or drop-down. Please help me. How I can create a map dynamically? You can find my code here.
I solved my problem. This was a little bit tricky to create a map from dynamic form. Code has been updated on plunker.
Step:
I declared a json object response at script.js.
Response[filed.attributeLabel] will work as a key and value will be bind when we select or enter some thing in dropdown or text filed avvording to key in scope variable.
I have two select fields using ng-repeat method I was adding (clone) the inputs.
I was two different array to maintain to push and remove the object.
But I need to maintain in single array is possible?
My working fiddle is here My Fiddle
Yes possible, just have $scope.model.campuses = [];only, and have a object for school and campus and push it to the array
function newCampus() {
$log.log("Adding a new campus");
$scope.model.campuses.push({Campus :$scope.model.campus, School :$scope.model.school});
}
Working fiddle
Im working with a webservice and the returning JSON brings back some meta data that I use to define the layout of forms.
However, the JSON is continually evolving by the developers so currently where I target:
ng-repeat="cat in metaData[1].AcceptedValues"
To draw all the form structure...
Means that at some stage metaData Array element 1 may no longer hold the structure for this current form, it may be 2, 3 etc. JSON developer said he has now added additional data to identify each of the nodes under the value NAME
Under array element 1 I can now see Name : "ProductData" - and similarly under the other nodes different unique identifiers for Name
So basically I need to know how I can adjust my condition above to search for the metaData array element that contains the value Name = "ProductData" (or the value for the form I am rendering) and then any changes in array position is irrelevant.
Thanks
You can create a method to find the specified object:
$scope.getProductData = function() {
angular.forEach($scopem.metaData, function(item){
if(item.Name === "ProductData"){
return item.AcceptedValues;
}
});
return [];
};
Then use it in your markup:
ng-repeat="cat in getProductData()"
I am trying to use angular-UI pagination for a table, where I am splicing the array where the page intersects the array. However I am not clear how to handle the fact that the array of objects is being added to and deleted to from within the table itself.
Also, I am sorting through a filter by the name property of an object in my ng-repeat. I expect what's is item[0] in my model array, does not correlate with the first item being displayed in the table via ng-repeat...I could be wrong.
I am just looking for advice on how to implement paging when the ng-repeat sorts the list, and the collection size is changing all the time.
Regards
I
you can try to use multiple filters at once for example:
ng-repeat="item in items | myFilter | limitTo:pageNumber*perPage | limitTo: -perPage"
This allow you to use your filter first on each collection/model change, then it show last "perPage" records dependig of "pageNumber".
Please see that demo : http://plnkr.co/edit/3nqRHUySsJZwpKQiMMTm?p=preview
just set watch to yourCollection.length
ie:
$scope.$watch('yourCollection.length', function(){
$scope.bigTotalItems = $scope.yourCollection.length;
}
)
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.