How do I initialize a form to values from other $scope variable in AngularJS?
I know that I have to use ng-init to achieve that but instead of initializing it to values I have to initialize that to value in the variable.
I have $scope.User containing all the details of the user, so when the data comes back I want that to fed into respective fields. For example $scope.User.FirstName gets fed into FirstName input field.
<label>FirstName:</label>
<input type="text" id="FirstName" required ng-model="newUser.FirstName" ng-init="newUser.FirstName='User.FirstName'"/>
The HTML element has to be defined as below.
<input type="text" ng-model="firstname">
Inside your angular controller, the JS code will be as below,
$scope.firstname = $scope.User.FirstName;
This will ensure that textbox will have a value displayed
In your HTML :
<input type="text" ng-model="User.firstname ">
<input type="text" ng-model="User.lastName ">
//other html elements
In your controller :
$scope.User= {
firstname : 'my first name',
lastName : 'my last name',
//..other data
}
Related
In AngularJs 1.x want to print all the ng-Model names in controller. In my application form has more than 100 input fields. Then my application one of the part, I have to declare all the input names into server side even few variable value is empty. So if I get ng-model names easy way to declare the variables.
For Example :
<div controller="IndexController as form">
<form name="myform">
<input type="text" data-ng-model="form.name" name="name"/>
<input type="text" data-ng-model="form.email" name="email"/>
<input type="text" data-ng-model="form.mobile" name="mobile"/>
</form>
</div>
Ouput: name, email, modile
You're best wrapping your ng-model in a scope object.
For example:
<input type="text" data-ng-model="form.details.name" name="name"/>
<input type="text" data-ng-model="form.details.email" name="email"/>
<input type="text" data-ng-model="form.details.mobile" name="mobile"/>
A model is just an object with key:value properties.
You can use the Object.keys to get an array of all properties keys and iterate on them, like below..
var keys = Object.keys($scope.details);
for(var i = 0; i < keys.length; i++){
console.log(keys[i]);
}
Consider you form model is like this:
let form = {"email": "abc#xyz.com", "fname": "abc"};
You can make use of for ... in loop.
The for...in statement iterates over the enumerable properties of an
object. For each distinct property, statements can be executed.
for (let i in form) {
console.log(form[i]);
}
OUTPUT
abc#xyz.com
abc
Hi I want to add two field and put in another field
<input type="text" ng-model="pfi.value1">
<input type="text" ng-model="pfi.value2">
<input type="text" ng-model="pfi.sum" >
its working fine in label
<label>{{ pfi.value1 + pfi.value2}}</label>
but how to do same thing in text field
You should set pfi.sum = pfi.value1 + pfi.value2; inside your controller. I'm not positive what the two-way binding would do if you then edited the text field attached to pfi.sum, but I suspect it wouldn't be good. However, for display purposes, this should work.
You can do it in the template
<input type="number" ng-model="pfi.value1">
<input type="number" ng-model="pfi.value2">
<input type="number" ng-model="pfi.sum" >
<p>{{ pfi.sum = pfi.value1 + pfi.value2}}</p>
The $interpolation service evaluates the exoression on each change to the inputs and updates the sum.
The DEMO on JSFiddle.
you should do it on the controller
pfi.sum = pfi.value1 + pfi.value2
also,you need to add the controller to your html file.
you should do that operation in your controller,
assuming you are using pfi for controllerAs attribute?
x.controller('xctrl', function() {
var pfi = this;
pfi.sum = pfi.value1 + pfi.value2;
});
In Angular JS are created inputs.
<input type="text">
<input type="text">
How I can to get values from each inputs and send to server?
I tried:
<input type="text" ng-model="typeInput">
But I get value only one field.
In server I am planning to get data format: $_POST['type'][0] = 'One value'; $_POST['type'][1] = 'Two value';
I mean, that I need send to server array of values. For example:
name="type[]" value="1"
name="type[]" value="2"
name="type[]" value="3"
So, in server I cando loop for check:
foreach($_POST['type'] as $val){
//prepare
}
Using the ng-model binds it to the property of the same name in the $scope of the controller.
You would access it in your controller like so:
$scope.typeInput
Or you can access it in your HTML like so:
{{typeInput}}
To access both fields, you would need to give them both a different property name to bind to.
<input type="text" ng-model="firstName">
<input type="text" ng-model="lastName">
...
alert($scope.firstName);
alert($scope.lastName);
More complete info here: https://docs.angularjs.org/api/ng/directive/ngModel
Edit: Here's an example fiddle with binding your inputs to an array: https://jsfiddle.net/gxmw62rj/2/
In my custom directive, I need to update the validity of another input. The directive is something like this :
<customDirective="foo">, in which the value foo is the name of another ngModel.
In my direcitve, I can get its model by :
var foo = scope[attrs.foo];.
But how can I get its ngModelController, to set its validity? Just like this :
fooModelController.$setValidity('customDirective', true);
EDIT :
In html, the input is defined as :
<input type="text" name="dateDebut" id="dateDebut" class="form-control" ng-model="formData.dateDebut" customDirective="dateFin" required>
<input type="text" name="dateFin" id="dateFin" class="form-control" ng-model="formData.dateFin" customDirective="dateDebut" required>
I get the dom node by angular.element.find(document.querySelctor('#dateDebut'));
angular.element(document.querySelctor('#dateDebut')).controller('ngModel') -- this will give the ngModelController defined on #dateDebut element.
Here is the plnkr: http://plnkr.co/edit/qXyxEb2QHyhuRUttNMXn?p=preview
I have a form for creating new records in a partial which I load in my main view like this
<div ng-controller="NewProductController">
<ng-include src=" 'views/partials/product-form.html' "></ng-include>
</div>
In the form, I have some input fields
..
<input ng-model="cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>
<input ng-model="name" type="text" id="name" class="form-control" placeholder="Enter the name" />
And in my controller, I'm sending a POST request with the values of the input fields:
...
.controller('NewProductController', function(Product, $scope) {
$scope.create = function () {
Product.create( {'cip': $scope.cip,
'name': $scope.name,
'dosage': $scope.dosage,
...
});
};
The problem is that when the values of the input fields change, it is not reflected in the controller ($scope.cip and $scope.name are undefined unless I initialized them with some value) but when $scope.cip and $scope.name are changed in the controller, the changes are correctly reflected in the view.
I thought that kind of updates are automatic or am I missing something ?
The reason why this is happening because ng-include creates a child scope. Since you are managing the model fields in the child scope i.e inside the template html, the fields are not available on the parent scope, where your controller is defined.
To fix this issue first and foremost thing that you need to do would be to create a obj such as product and define it on the controller NewProductController scope.
$scope.product={};
The template then should bind to sub properties of this product object.
<input ng-model="product.cip" type="text" id="cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>
Now your changes would be available in the parent product object.
You can improve it a bit by passing the product object using ng-init like this
<ng-include src=" 'views/partials/product-form.html' " ng-init='model=product'></ng-include>
Now your template input fields change to
<input ng-model="cip" type="text" id="model.cip" class="form-control" placeholder="Enter the CIP" autofocus="autofocus"/>
Advantage
You template is not dependent on the structure of parent model class. Dependency is explicit. The template becomes more reusable as it clearly defines the model it works with, like in your case the template works with Product model.
For the sake of completeness of the answer i must link to this must read article, Understanding Scopes