Get value of angular to localStorage - javascript

I want to get the value of angular and store it in my local storage. something like this:
<input type="text" id="ID" value="{{sudent.id}}">
<script>
localStorage.setItem("STUDID", document.getElementById("ID").value);
</script>
and I want the result to be:
<script>
localStorage.setItem("STUDID", "HUMMS-201906");
</script>

use ng-model so as to provide two-way data binding and in controller access the ng-model value using $scope.
angular.module('inputExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.student = {
"id": 101
};
console.log($scope.student.id);
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="inputExample">
<div ng-controller="ExampleController">
<input type="text" name="studentId" ng-model="student.id" required>
</div>
</body>

Related

Resolving ng-model outside the form

I have an html file with 2 form elements with input elements inside both. I would be using the ng-if to select which form element I need. The input elements are bound to the same model. But I am unable to resolve it outside the form scope.
<form ng-if="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}} //This is different from the value of either of the input elements
//it has the initial value which i would assign : $model_name = "xyz"; in my associated js file
The reason you are not able to see those changes outside your form is because you are using 'ngIf' directive to add/remove the DOM and also the 'ngIf' directive creates a new scope.
There are two quick ways to solve this:
1) Make use of 'ngShow'. Look at the below example:
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = 'Hi';
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-show="some_name == '1'">
<input ng-model="model_name">
</form>
<form ng-show="some_name == '2'">
<input ng-model="model_name">
</form>
{{model_name}}
</div>
2) Make the input model an object, instead of a primitive.
angular.module('app', [])
.controller('HomeController', function($scope) {
$scope.model_name = {
value: 'Hi'
};
$scope.some_name = '1';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="HomeController">
<form ng-if="some_name == '1'">
<input ng-model="model_name.value">
</form>
<form ng-if="some_name == '2'">
<input ng-model="model_name.value">
</form>
{{model_name.value}}
</div>

How to can I define scope to HTML block in Angular?

I have a very large form in my application page, and I have a JSON variable, where I saving all form data in it, and I'm using controllerAs expression.
<form>
<input type="text" data-ng-model="ctrl.myJSON.name"/>
<input type="text" data-ng-model="ctrl.myJSON.old"/>
<input type="text" data-ng-model="ctrl.myJSON.address"/>
<input type="text" data-ng-model="ctrl.myJSON.email"/>
<input type="text" data-ng-model="ctrl.myJSON.phone"/>
<!-- and many more... -->
</form>
How to can I define myJSON as the form scope, for no need repeat this variable many time in all fields?
you can use angular extend to copy the json data to $scope. And then, you can use directly:
.controller('YourController', function($scope) {
$scope.readData = function() {
// replace with your read data function
var myJSON = { name: 'test' };
angular.extend($scope, myJSON);
}
}
after that, the variables will work directly:
<input type="text" data-ng-model="name"/>
Wrap the form inside a separate, dedicated controller FormController and copy the myJson key-value-pairs to its $scope.
This is possible in the later versions of Angular using scope inheritance/nested scopes.
HTML
<div ng-controller="MainController">
<form ng-controller="FormController">
<input type="text" data-ng-model="name"/>
<input type="text" data-ng-model="old"/>
<input type="text" data-ng-model="address"/>
<input type="text" data-ng-model="email"/>
<input type="text" data-ng-model="phone"/>
<!-- and many more... -->
</form>
</div>
JavaScript
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function($scope) {
// other logic goes here
}]);
myApp.controller('FormController', ['$scope', function($scope) {
// Initialize myJson by loading its data from a service
angular.extend($scope, myJson);
}]);
JSFiddle: https://jsfiddle.net/206redxb/5

ng-model value of input text box is undefined inside angularjs controller when set dynamically through javascript

In my HTML Page i am setting an input text box value not by typing but through JavaScript and then when I am fetching that value using AngularJS inside the controller using scope, then it's showing undefined....
Below is my code:-->
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change'}" />
<input id="getUser" type="submit" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
//$("getUser").on('click', function(){
//alert("First Name "+$("#fname").val());
$("#lname").val($("#fname").val());
alert("Last Name set to "+$("#lname").val());
// });
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
angular.copy({},user);
}
});
</script>
</body>
</html>
After clicking Get User Button, first the lastname field value is set through JQuery then AngularJS controller is called in which the ng-model value is undefined. I am unable to understand this. What is the solution or workaround for this type of scenario where the input text field value is set dynamically through JavaScript or JQuery and fetched and used using AngularJS Model and Controller.
Looks like you have a typo at ng-model="user.lasttname"
<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form id="someForm" name="someForm">
First Name: <input type="text" id="fname" ng-model="user.firstname" ng-model-options="{updateOn: 'change'}" />
Last Name: <input type="text" id="lname" ng-model="user.lastname" ng-model-options="{updateOn: 'change blur'}" />
<input id="getUser" type="button" ng-click="getUserName(user)" value="Get User" />
<input id="getUser2" type="button" ng-click="getUserName(user)" value="Get User" />
<button ng-click="resetForm(user)">RESET</button>
</form>
</div>
<script>
$('#getUser').on('click', function(){
var element = angular.element($('#someForm'));
element.scope().user.lastname = $("#fname").val();
});
</script>
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {};
$scope.getUserName = function()
{
console.log("User: "+ JSON.stringify($scope.user));
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
$scope.resetForm = function(user) {
//Even when you use form = {} it does not work
// angular.copy({},user);
}
});
</script>
</body>
</html>
Add this in angularjs code:-
<script>
//angular.element(document).ready(function () {});
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.user = {}; // Initiate this
$scope.getUserName = function(user)
{
alert("Last Name in Angular Controller: "+$scope.user.lastname)
}
});
Of course!!! If you want the binding (HTML <--> JavaScript) you must respect the rules of Angular. What you need to do is to update the ng-model being defined for the input box. So, add to your input box: ng-model="blabla" and within your JavaScript: $scope.blabla = <value>.
Correction: You do have the ng-model in the input, but still miss the assignment within your javascript code.

How get Hidden value in angularjs?

i want to alert hidden value in this sample angularjs example. but not alert hidden value. why?
function TestController($scope) {
$scope.id = "";
$scope.test = function () {
alert($scope.id)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-value="12"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>
ng-value isn't what you're looking for here. In Angular, you use ng-model to bind a controller value to your view element's value, like this:
function TestController($scope) {
$scope.id = "12"; // Initial value can be set here
$scope.test = function () {
alert($scope.id);
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<!-- ngModel is used to two-way bind between your value & your controller -->
<input type="hidden" name="id" ng-model="id"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>
You need to bind value to id using ng-model and also instead of using ng-value use ng-init to initialize it. Also as mentioned by #RGraham, if you want to have default value try to initialize it in controller.
ng-value is used for binding value to or input [radio/checkbox], see here.
function TestController($scope) {
$scope.id = "";
$scope.test = function () {
alert($scope.id)
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController">
<input type="hidden" name="id" ng-model="id" ng-init="id=12"></input>
<input type="submit" ng-click="test()" value="alertHiddenValue"></input>
</div>

Two-way data binding is not working on text boxes in AngularJS

I tried to implement two-way data binding in two text boxes using AngularJS, however it is not working.
Here is my code:
<html ng-app="myApp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script>
var app = angular.module('myApp', []);
</script>
</head>
<body ng-controller="tasksController">
<input type="text" ng-model="username" value="{{userage}}">
<input type="text" ng-model="userage" value="{{username}}">
</body>
Can anyone help me on this?
You haven't defined tasksController in your Angular code:
<script>
var app = angular.module('myApp', []);
app.controller('tasksController', function($scope){
$scope.username = "John Doe";
$scope.userage = 45;
});
</script>
The model scope will then work. Also, you don't need to bind the model to the input value. ng-model binds the value automatically :
<input type="text" ng-model="username">
<input type="text" ng-model="userage">

Categories

Resources