Generate Dynamic ng-model for form Control in angularJS - javascript

I have an Array in my controller. On the basis of that Array I'm generating Input fields On my page.
My AngularJs code
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.names = ['morpheus', 'neo', 'trinity'];
});
And on page I'm generating my input fields
<form name="myForm1" ng-controller="MainCtrl">
<div ng-repeat="gg in names">
<input type="text" ng-model="control[index]"/>
</div>
<input type="submit" value="submit"/>
</form>
Now it generating ng-model for each textbox are control[index]
but I want to generate ng-model for each textbox like
control[0]
control[1]
control[2]
Plunker

you have to use
<input type="text" ng-model="control[$index]"/>
and there is no scope variable called control so you need to define the scope variable also, as below
$scope.control = {};
here is the updated Plunker

Related

AngularJS process form on form click

I'm trying to submit a form when user clicks on any part of the form, and then process it using AnglujarJS. Here's how I tried doing it:
<form ng-click="submit()" ng-app="MyApp" ng-controller="MyCtr">
<input type="text" ng-model="my_val" name="my_val" value="0" style="display: none"/>
</form>
var app = angular.module('MyApp', []);
app.controller('MyCtr', function($scope) {
$scope.submit = function() {
$scope.my_val; // This is undefined
});
};
});
The problem is that $scope does not have form values. If I replace ng-click with ng-submit, the values are present, but I don't want to submit form by clicking on a submit button.
You need to declare and set to 0 $scope.my_valoutside of submit function and also ij Js code there are unnecessary closed brackets check that as well.
var app = angular.module('MyApp', []);
app.controller('MyCtr', function($scope) {
$scope.my_val="0";
$scope.submit = function() {
$scope.fromvalue.my_val
console.log($scope.fromvalue.my_val.$viewValue);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="fromvalue" ng-click="submit()" ng-app="MyApp" ng-controller="MyCtr">
<input type="text" ng-model="my_val" name="my_val" value="0"/>
</form>

Angular using ng-model in input field get null

I know how to pass a value from a view to a controller using ng-model. In the controller it just gets the value from the view using this code $scope.name = this.ngmodelnameinview.
Is it compulsory to use ng-model in field view?
but my problem now is, I have + button, which when I click the button it will automatically put the value inside input text field.
<button data-ng-click="adultCount = adultCount+1"> + </button>
<input type="text" name="totTicket" value="{{adultCount}}">
see picture below:
but when I add ng-model inside input field, it returns null
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
How to fix this? Thanks!
It is giving null just because you have set a value "adultCount" and in ng-model you had given a different name "adultcount" ('c' is in lower case). By updating ng-model with "adultCount", will solve this issue.
JavaScript is case sensitive:
JavaScript is case-sensitive and uses the Unicode character set.1
Use the same case for the scope variable. Update the input attribute ng-model to match the varible - i.e.:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultcount">
should be:
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
<!-- ^ -->
See this demonstrated in the snippet below:
angular.module('app', [])
.controller('ctrl', function($scope) {
//adultCount could be initialized here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button data-ng-click="adultCount = adultCount+1"> + </button>
totTicket:
<input type="text" name="totTicket" value="{{adultCount}}">
totTicket (adultCount):
<input type="text" name="totTicket" value="{{adultCount}}" ng-model="adultCount">
</div>
——
1https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types

Update Textarea value with ID instead of using ng-model in AngularJs

I can use the below code snippets to update the value of one textarea with another simultanoeusly
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input id="id1" type="text">
<input id="id2" type="text">
</div>
</div>
Script file:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', ['$scope', function($scope){
$scope.text1 = '';
}]);
Is there a way I can use the ID to update the value simultanously instead of the ng-model property. Thank you!!!
You can try to use $watch:
$scope.$watch('text1', function () {
document.getElementById('id2').value = $scope.text1;
});

Argument '' is not a function, got undefined in Kendo ( AngularJS )

I want to make a Kendo grid with 4 tabstrips, 4 children grids, 5 controllers, first is parent, others are children. Here is a part of code, with one parent and one child controller. Problem is that all the time I got an error "Argument '' is not a function, got undefined" Where should I define it? Everything is stored locally so the preview is not possible
Check this out:
http://fdietz.github.io/recipes-with-angular-js/controllers/sharing-models-between-nested-controllers.html
You don't nest the controllers in your javascript. This is from that link:
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.name = "Peter";
$scope.user = {
name: "Parker"
};
});
app.controller("MyNestedCtrl", function($scope) {
});
Instead, you nest the controllers in your markup. I don't see where you are binding the controllers in your markup, btw.
<body ng-app="MyApp">
<div ng-controller="MyCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Object</label>
<input type="text" ng-model="user.name">
<div class="nested" ng-controller="MyNestedCtrl">
<label>Primitive</label>
<input type="text" ng-model="name">
<label>Primitive with explicit $parent reference</label>
<input type="text" ng-model="$parent.name">
<label>Object</label>
<input type="text" ng-model="user.name">
</div>
</div>
</body>
This is all from that link I provided.

Angular JS how to pass value from rootscope into ng-model?

I have object into rootscope and i would like to display some values in form inputs.
I tried following:
<input type="number" ng-model="$root.order.id" class="form-control" id="orderNumber" />
But this is not working.
How i should pass value into ng-model?
Thanks for any help.
No need of attach de $root to the variable, the flow of scope in angular is first search in the local scope for the variable, if not found search the property in $scope.parent, and the rootScope if the high level of parent if not match with any else, then search there.
http://plnkr.co/edit/3ENyPRwrFq5ssR2uLtQy
In this plnkr look the usage of the root scope
Controller:
app.controller('MainCtrl', ["$scope", "$rootScope", function($scope, $rootScope) {
$rootScope.varRoot = {
element: "Jesús"
};
}]
);
HTML:
<body ng-controller="MainCtrl">
<p>Hello {{varRoot.element}}!</p>
<input type="text" ng-model="varRoot.element">
</body>
Just use the name, ex:
$rootScope.order.id = 3;
<input type="number" ng-model="order.id" class="form-control" id="orderNumber" />

Categories