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" .. />
Related
We can get the validation info if the input is in a form: $scope.myForm.myField.$invalid etc..
What if input is outside of a form? How can we access the info?
I guess that field data (properties of the form object) is not same thing with ngModel. I tried something like this but didn't worked: (the model only contains string value of the input)
<input ng-model="myFakeForm.myField">
How can I achieve this?
Use the ng-form directive:
<div ng-form="set1">
<input name="field1" ng-model="myFakeForm.myField" ng-required="true" />
</div>
The input's ngModelController will be bound to $scope.set1.field1:
console.log($scope.set1.field1.$valid);
console.log($scope.set1.field1.$viewValue);
//... etc
For more information, see
AngularJS ng-form Directive API Reference
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'm aware of properties like $pristine, $dirty etc. However, $dirty simply indicates if that form element has been interacted with.
How do I check if that form element has been actually changed?
I need something like a $changed property on the element that indicates if the value of that input (or in the case of a form, any child input) has been updated. If the value is set back to the original value, I want $changed to be set back to false.
My question: does angular have something like this already? If not, how do I go about building such functionality?
You will need to store the form data, watch and then compare. This directive seems to that does that with a "modified" property which sounds like your "changed" property you are looking for. They have a plunker to test.
You could use a watch but if you want to re-use the code repeatedly you will need to create a directive to do the heavy lifting.
https://github.com/betsol/angular-input-modified
You can use $watch like so:
In your controller:
$scope.$watch('myForm', function(){
console.log('Form Changed')
},true)
In your HTML:
<form name='myForm'>
<input type="text" placeholder="Enter new name" ng-model="myForm.inputText" />
<input type="text" placeholder="Other" ng-model="myForm.inputOther" />
<input type="submit" />
</form>
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.
I have a form input with names containing brackets, e.g.:
<form name="my_form">
<input type="text" name="my_form[email]" ng-model="email" ng-class="'mycssclass': my_form.my_form[email].$invalid">
</form>
So, the problem is that Angular is not applying that css class because of the name of my input (my_form[email]), is that the correct notation to reference my input in Angular.
Here's is a plunk:
http://plnkr.co/edit/t7PEilV9maNYGnVYnTDc?p=preview
The way to reference an input with a name containing brackets is using brackets notation, like this:
my_form['my_form[email]'].$invalid
You need to use the ng-model attribute in your input. It bind the content of a field with a value in the $scope. You also need to pass a Javascript Object to the ng-class directive. In your example it would be :
<form name="my_form">
<input type="text" ng-model="my_form.email" ng-class="{'mycssclass': my_form.email.$invalid}">
</form>
Don't hesitate to look at the examples in the ng-model and ng-class directive documentation.