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
Related
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 am new to AngularJS, and I have a problem with ng-model.
Here's my code:
<section class="field row" ng-repeat="field in fields">
<input class="value" ng-show="editMode" placeholder="{{field.name}}" ng-model="field.value" type="url" />
</section>
As you can see, I'm looping through $scope.fields which I got from the server and is an array of about 40 objects that have keys like name and value.
Inside the section I have an input, which has the ng-model property set to field.value. When the server gives a value to the field, it is shown inside the input.
At some point I want to update the user's changes, by sending $scope.fields back to the server.
However, when the user changes something in the inputs, the value for the changes fields becomes undefined.
I hope this describes my problem well enough.
Thanks!
To get the changes, you should pass the original object name i.e fields. Refer below calling fn
ng-click="save(fields)"
The reason this caused a problem is simply because the input was a URL input and I was typing simple "hello" strings to test it, instead of typing URLS. Apparently AngulaeJS only puts the answer in the model if it matches the field type.
Like in this question, I want to add .error on a form field's parent .control-group when scope.$invalid is true.
However, hardcoding the form name like in ng-class="{ error: formName.fieldModel.$invalid }" means that I can't reuse this in different forms, plus I'd rather not repeat this declaration everywhere.
I figured that a directive that looks something like this could work:
<div class="control-group" error-on="model1, model2">
<input ng-model="model1">
<input ng-model="model2">
</div>
So when either model1 or model2 is not valid, .control-group gets .error added.
My attempt here. Is it possible to access the models from the directive, given the model names?
If there's a better approach, I'd love to hear it too.
I don't think that writing a custom directive is necessery for this use-case as the ng-form directive was created exactly for situations like those. From the directive's documentation:
It is useful to nest forms, for example if the validity of a sub-group
of controls needs to be determined.
Taking your code as an example one would write:
<div class="control-group" ng-class="{ error: myControlGroup1.$invalid }>
<ng-form name="myControlGroup1">
<input ng-model="model1">
<input ng-model="model2">
</ng-form>
</div>
By using this technique you don't need to repeat expressions used in ng-model and can reuse this fragment inside any form.
You can also change the markup in the accepted answer to do without the nesting, since ng-form is also a class directive:
<div class="control-group ng-form" name="controlGroup11" ng-class="{ error: controlGroup1.$invalid }>
<input ng-model="model1">
<input ng-model="model2">
</div>
Final solution Fiddle
Inside your link function, you can get access to the formController. It has all of the controls. So the following will give your directive access to .$valid:
el.controller('form')[attrs.errorOn].$valid
However, I don't know how to watch that for changes. I tried watching attrs.errorOn (i.e., watch the ng-model property), but the watch doesn't trigger unless a valid value is input (because of the way Angular forms work... unless that value is valid, it is not assigned to the scope property set by ng-model.)
Fiddle.
Maybe someone can take this further...
Normally, with a form and input fields, the form controller is published into the related scope under the form name attribute. And, the NgModelController is published under the input name attribute.
So for an input field with an ngModel directive, the NgModelController for the input field can be retrieved like $scope.myFormName.myInputFieldName
The question is how to do the same thing (get the NgModelController) for input fields inside the ngRepeat directive?
I would like to name the input fields using $index as part of the name so each template instance is uniquely named. This renders OK, so
<input name="foo_{{$index}}" ...
renders the instance with $index == 3 to
<input name="foo_3" ...
But trying to get the ngModelController via the published names does not work (it's undefined), e.g.:
$scope.myFormName.foo_3
A plunker showing this is here: http://plnkr.co/edit/jYDhZfgC3Ud0fXUuP7To?p=preview
It shows successfully getting the ngModelController for a 'plain' input element and calling $setValidity, and also shows failing to get the ngModelController for an input element inside an ngRepeat directive.
Copied the relevant section of code from the plunker below:
<div ng-repeat="element in elements">
<div ng-class="{error: form['foo_{{$index}}'].$invalid}">
<input name="foo_{{$index}}" ng-model="element.a" type="number">
<span ng-show="form['foo_{{$index}}'].$error.bar">ngRepeat bar invalid</span>
</div>
</div>
{{form.foo_0.$setValidity('bar', false)}}
#Flek is correct that the new child scopes that ng-repeat creates are the root of the problem here. Since browsers do not allow nesting of <form> elements, ngForm must be used when nesting forms, or when you want to do form validation inside ngRepeat.
See Pawel's answer on the google group thread, which shows how to use ng-form to create inner forms, and/or #blesh's SO answer.
If i understand your question correctly, you are trying to have access to the form elements created inside the ng-repeat.
Please have a look at this fiddle http://jsfiddle.net/EF5Jp/. Inside the button click handler you will have the access to the element with id myForm.foo_2. You can notice that the element is retrieved by myForm.foo_2 and not $scope.myForm.foo_2. Second thing is, changing the value using its scope and not using its value property like angular.element(element).scope().foo = 6;.
I can easily bind data to a div or pre tag with the code:
<div id="json_route{{route.id}}" ng-bind="items.route{{route.id}} | json"></div>
However, I want to try and bind this data to a hidden form input, I tried:
<input type="hidden" name="json_route{{ route.id }}"
ng-model="items.route{{route.id}} | json" />
Which returns me an error of:
Error: Non-assignable model expression: items.route2 | json (<input type="hidden" name="json_route2" ng-model="items.route2 | json">)
So obviously I cannot use | json when using ng-model. The angular docs are still a bit sparse and I can't seem to find how to assign this correctly, even if I can? Thanks :)
I need to get this json data loaded into my pyramid application, and assigning it into a hidden form field seemed the best way todo it, or should I be doing this in a different way?
"To be able to render the model into the view, the model has to be able to be referenced from the scope." (src: Angular Guide).
Angular needs to be able to reference the value in your ngModel expression to a $scope variable in your controller.
With ng-bind it worked, because ng-bind is not the same as ng-model. ngBind simply takes your expression and evaluates it inside the current scope and than replaces the text of the host element with the result. As Guide tells us, the value of ng-model must be an assignable angular expression to data-bind to.
To have your hidden input contain the json string representation of your 'items.route2' model you could setup a $watch expression in your controller which would "prepare" the json string of your model whenever it changes. See plnkr example.
Try using ng-init:
<input type="hidden" name="..." ng-model="items.route{{route.id}}"
ng-init="items.route{{route.id}} = data_from_server_here">
See also https://stackoverflow.com/a/12657601/215945.