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

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;
});

Related

Is it possible to change ng-model value without ng-change function?

Is it possible to change ng-model value without ng-change function??
The following method is not work
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field">
<div> {{field}} </div>
</div></div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('MyCtrl', function($scope){
if(document.getElementById("checkbox").checked){
$scope.field="YES";
}})
but use the following code is work for me
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<input id="checkbox" type="checkbox" ng-model="field" ng-change="change_text()">
<div>{{field}}</div>
<script>
var myapp = angular.module('myApp', []);
myapp.controller('MyCtrl', function($scope){
$scope.change_text = function() {
$scope.field="YES";
}})
</script>
To accomplish what you are trying to do, you can use ng-true-value and ng-false-value to have your model be a type other than a boolean without breaking the two way data binding with ng-model.
for example:
<input id="checkbox" type="checkbox" ng-model="field" ng-true-value="'YES'" ng-false-value="'NO'">
{{field}}
Pass the values for ng-true-value and ng-false-value as string literals (wrapped in the extra quotes).
http://plnkr.co/edit/hjuwOV6q6iZOaXv89M6x?p=preview

Angular JS access input values based ng-model stored in a string

So I managed to generate and import an html code like
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
and I obtained a String array containing the ng-models of all such inputs in an array from a $http.post request like
$scope.ngmods=['text1','text2']
how do I get the values of the inputs by manipulating the array elements?
Here is what I have tried :
{{ {{ngmods[0]}} }}
like i tried to get the value of in the array element and then again enclosed it in the {{ }} hoping the results would be the same as {{text1}}
use $parse to evaluate the expression against scope.
create a custom filter with $parse to get the scope value from a string
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
in the html pass the current scope this from the html to filter
{{ngmods[0] | parserFil : this}}
angular.module("app",[])
.controller("ctrl",function($scope,$parse){
$scope.ngmods=['text1','text2'];
})
.filter('parserFil',function($parse){
return function(item,scope){
return $parse(item)(scope);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2">
{{ngmods[0] | parserFil : this}}
</div>
angular.module('todoApp', [])
.controller('TodoListController', ["$scope",
function($scope) {
$scope.setValue = setValue;
function setValue() {
var list = [];
list.push($scope.text1);
list.push($scope.text2);
$scope.ngmods = list;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="todoApp">
<div ng-controller = "TodoListController">
<input type="text" ng-model="text1">
<input type="text" ng-model="text2" ng-blur="setValue();">
<span>{{ngmods[0]}}</span>
</div>
</div>
Use ng-repeat & make sure html in under ng-controller
Example
<html>
<body ng-app="myApp" ng-controller="myCtrl">
<h1 ng-repeat="x in records">{{x}}</h1>
<script>enter code here
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = [
"Amar",
"Mhatre"
]
});
</script>
</body>
</html>

Cannot get value of ng-model through $scope

I am trying to get the value of the ng-model when clicking a button which triggers a function to add each ng-model value to an object. When trying to get the value of $scope.shipNameFirst, it comes up as undefined in the second example.
I've read that it's better to get the value of $scope on the view rather than passing it through the stripeBtn function, so ideally I'd like to do it that way. Hopefully this makes sense.
Can someone explain why this is not working?
Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn(shipNameFirst, shipNameLast)">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(shipNameFirst, shipNameLast){
$scope.details = {
recNameFirst: shipNameFirst,
recNameLast: shipNameLast,
}
}
Not Working
HTML
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
Controller
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst); //logging this (with $scope) comes up as undefined
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
Thanks!
Check the following code. It's working nicely.
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope){
$scope.stripeBtn = function(){
console.log($scope.shipNameFirst);
$scope.details = {
recNameFirst: $scope.shipNameFirst,
recNameLast: $scope.shipNameLast,
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<input type="text" ng-model="shipNameFirst">
<input type="text" ng-model="shipNameLast">
<button type="button" ng-click="stripeBtn()">Checkout with Stripe</button>
</div>

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.

Generate Dynamic ng-model for form Control in angularJS

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

Categories