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.
Related
I have a task:
dynamicly generate 2 inputs calls "name of field" and "value of field" and then put data to object in $scope
example
first input value is "angrular"
second input value is "awesome"
as a result I get custom object with field "angular" and value "awesome"
P.S. Sry for poor level of English
You can achieve this only with markup, making use of the directives ng-model and ng-change:
<div ng-app>
<input ng-change="obj[propName] = propValue" ng-model="propName"/>
<input ng-change="obj[propName] = propValue" ng-model="propValue"/>
<div>Result: {{ obj }}</div>
</div>
... though you said "dynamically generate 2 inputs", which may imply the task involves having the ability to add multiple properties to the result object. This live example shows a way to do that.
Check the docs:
ngModel
ngChange
I am having trouble figuring out a good way to bind the data in this dynamically created table. I'm having trouble, both referencing the data for the original value of the input field, and I am having trouble updating the model after a change is made to the input field.
I've tried these:
<input type="text" value="{{set.date}}" ng-change="change(this.value)" />
<input type="text" ng-model="{{set.time}}" ng-change="change(this.value)" />
<input type="text" ng-value="{{set.exercise}}" ng-change="change(this.value)" />
PLUNKER
Do I need to create a unique key and pair it to each object in the model array so that I can pass it though to the change() method?
I'd like to avoid creating another level of keys in my model if possible.
You should use ng-modle like this ng-model="set.time" You don't need the curly braces to interpolate the expression because ng-model itself is a directive, it evaluates the expression for you.
Here is an example
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]".
I'm very new to angular!! What i'm trying to do is get the form name from inside the associated controller or a reference to the form object from inside the controller.
<form name="someName" ng-controller="formController">
<label>Name:
<input type="text"/>
</label>
<input type="submit"/>
</form>
controller:
obApp.controller('formController',function($scope){
//this does NOT work - undefined - was expecting it to be "someName"
var q = $scope.formName;
//this exists - but can not use it since the
//name of the form can be whatever and i do not know beforehand what that name is
var name = $scope.someName.$name;
});
My problem is that i don't know how in the world to get the name of the actual form. A reference to it would be even better. Looked for about 5 hours and i can't seem to figure it out.
The problem translates to this: "How to get a reference to the form object form the associated controller?".
The thing is that you want to access the DOM element of the controller, you could do it like this:
obApp.controller('formController',function($scope, $element){
var name = $element.attr('name');
});
But that is considered a bad practice, you shouldn't be accessing the DOM element directly inside the controller, consider using a directive instead.
I am facing problem in populating default values for dynamically generated form fields in using angular. So, I have a login form that generates itself based on the attribtes returned by aREST interface. Therefore for my html page, I just have :
<li ng-repeat="element in elements">
<label>UserName</label>
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required"/>
The default values are returned in an attribute called placehoder in elements object. following tag gives an idea of the task that I am trying to achieve
<input type="{{element.inputType}}" ng-model="{{element.fieldName[element]}}" required="required" placeholder="{{element.placeholder}}"/>
Finally, when the user clicks submit , I need to post the default value of text field if it has not been changed.
Any help would be highly appreciated.
Thanks
If you can add/use a library like underscorejs or lodash, then you can use their _.defaults() :
var object = { 'name': 'barney' };
_.defaults(object, { 'name': 'fred', 'employer': 'slate' });
// → { 'name': 'barney', 'employer': 'slate' }
with angular only, you could add a directive to your form, that watches 'submit' and sets the default values for you.
Thanks for replying #nilsK, I am very new to javascript frameworks and Angular is the first one that I am having my hand on.
So in my R&D with it , I solved my issue by adding the two arrays of values i.e. FieldName and Placeholder to the scope object that I use to post data to my backend. I assign values to these arrays from the objects(placeholder and fieldName) that recieve from REST service as:
$scope.user={};
$scope.user.FieldNames=[];
$scope.user.FieldValues=[];
angular.forEach($scope.elements,function(value,index){
$scope.user.fieldValues[index] = $scope.elements[index].placeholder;
$scope.user.fieldNames[index] = $scope.elements[index].fieldName;
})
and on the html form, I bind ng-model to the scope array of values that I want to display as defaults in text field.
<input type="{{element.inputType}}" ng-model="user.fieldValues[$index]" required="required" />
Therefore, the default values are posted if user does not change them and if there is a change, updated values are posted.
Any suggestions to improve this solution are most welcome.