I am generating a form dynamically in my application. The fields of the forms are the column names in the database table.The user of this application will just pass the name of the table and the skeleton for CRUD application will be prepared dynamically.
In the view part I want to achieve something like this
<div class="form-group" ng-repeat="(key,col) in cols">
<label for="{{::col}}">{{::col | uppercase | replaceUnderscore}}</label>
<input class="form-control" type="text" ng-model="{{::col}}" required />
</div>
In the ng-model I just need the string value that is, if the column name is Username then model value should be something like ng-model="username" and the value should not be displayed in the form field. So I want to achieve kind of one way data binding.
Simply use a JS object, for example $scope.data = {}, and then ng-model="data[col]".
Related
How do we write input fields on AngularJS page which has Onetomany mapping?
User Class has Name and phone attributes and can have multiple phone numbers.
AngularJS code for fName input field
<input tabindex="10" style="width: 60%;" type="text" ng-model="ctrl.user.fName" placeholder="First Name">
''''AngularJS code for phone mapping -as this is a OneToMany field so i have taken List in User class, now i have 3 input textfields on AngularJS page-so how do i write ng-model for the same, for first text field I have declared like below but what about second and third text fields-how to declare ng-model for phone field.
<input type="text" ng-model="ctrl.user.phone.phoneNumber" placeholder="Parking #">
The basic answer is by using *ngFor, but I'm not sure this is the best approach for your use case.
<div *ngFor="number of ctrl.user.phone.phoneNumbers">
<input type="text" ng-model="number" placeholder="enter a new number">
</div>
If you only plan to have three numbers it might be easier just to give a specific phone type to each one:
<input type="text" ng-model="ctrl.user.phone.homePhone" placeholder="Home #">
<input type="text" ng-model="ctrl.user.phone.cellPhone" placeholder="Cell #">
<input type="text" ng-model="ctrl.user.phone.workPhone" placeholder="Work #">
Finally, depending on what version of Angular you are using, you might find it easier to implement a FormControl instead of using ng-model.
so i was able to find the answer and surprisingly not much material is available on any portal regarding the same.
so the question was how to use OneToMany mapping in AngularJS and any backend like Springboot with Hibernate.
Ex User has direct columns like Name, age, DOB etc but lets say User has onetomany mapping with an object Contact (which further has phonenumber, email, emergency contact etc)
In Agular we can directly put ng-bind on name field like ctrl.use.name but for phonenumber field, it was specified in below way
ctrl.user.contact[0].phonenumber
Please note that, now in user class you have to make a setter which accept array of contacts like this-
public void setContact(Contact[] contacts){....implementation}
so now on user form i can have multiple contacts object which will be persisting as OneToMany relationship.
I have an array like this:
var data = [{
"chamberName": "Community App",
"representativeEmail": "some#email.com",
"primaryColor": "#325490",
}]
And an input on a form like this:
<input type="text" class="form-control" id="chamberName" ng-change="" placeholder="Chamber Name">
I'd like to use ng-change to change the array value that matches the changing input value. I can't figure out how to get the input value though. I am thinking something like:
ng-change="data[0].chamberName = inputValue";
Any help would be great!
SIDE NOTE: You need to use $parent when using ng-include.
You need to use ngModel.
Why your original data in array?
If you need to edit only one instance it is simpler to use object and pass object's property to ngModel
<input .. data-ng-model="data.chamberName" .. />
Or if you are going to edit pool of objects, than you can surround it with ngRepeat
<fieldset data-ng-repeat="elm in data">
<input .. data-ng-model="elm.chamberName" .. />
..
</fieldset>
Or if you still want to store your single object in array
<input .. data-ng-model="data[0].chamberName" .. />
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
I've a language table, a table with custom tablenames and a table with translations.
Now I want to insert a new table in all languages. In my Controller I asked for the number of elements in my language table and generate the view:
var countLanguages = function () {
vm.languages = configService.getGlobalLanguageList();
};
and the View:
<ul ng-repeat="language in vm.languages">
<h3>{{translations}}</h3>
<div>
<label for="EditLanguageLabel" ng-bind="language.label"></label>
<input type="text" ng-model="translations" id="EditLanguageLabel" required />
</div>
</ul>
But how can I get all fields and save the data in the translationtable with the id of the language and the id of the custom table?
It is not possible to get the $scope.translations in the Controller because every ng-repeat has ist own scope, right?
vm.save = function ()
{
var test = $scope.translations;
};
What is the right way to solve this Problem.
One possible solution could be to load an empty custom table object and add the language. I think there is surely be a better solution.
I assume you are wanting to change the label of the language. If so all you need to do is set the ng-model of the input to the language variable so:
<input type="text" ng-model="language.label" id="EditLanguageLabel" required />
this will bind the value of the input to the label of the language and anytime you call get the language.label field it will be the version in the input.
Also ng-repeat doesnt create its own scope anything u access inside of it that is not on the object you create when looping (ex: language.label) is going to be on the scope so you translations is really $scope.translations. If you want each individual language to have its own translations you will need to add the variable to the object array being returns and set the model to:
<input type="text" ng-model="language.translations " id="EditLanguageLabel" required />
the above code will populate a translations variable on the language object with the value in the input.
I'm giving an student scenario as example.
Assume I have the below scope variables that needs to populated when I select a id.
$scope.student.name;
$scope.student.address;
$scope.student.city;
$scope.student.zip;
The sample html below.
<input type="text" ng-model="student.id"/>
<input type="text" ng-model="student.name"/>
<input type="text" ng-model="student.city"/>
<input type="text" ng-model="student.address"/>
<input type="text" ng-model="student.zip">
In a regular jQuery, I would write on change and trigger. But how do I achieve this in angular way.
I might want to have the entire db values in a hashmap of <studentid,List<studentdetails>> and use this hashmap values to be populated on the respective fields.
I know this is probably a little late on the draw to answering this question, but I was searching for an answer to auto-population with Angular today and found that you could populate an input using ng-value and passing it into your value held inside of {{}}.
It would look something like this: ng-value="{{exampleValue}}
Hope this helps.