Input field contains JSON data set from some other script.I have to access in controller.How can I access it in controller.Code I am using something like this-
<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
Enter first name: <input class="get" type="text" ng-model="student">
</div>
<script>
function studentController($scope) {
console.log($scope.student);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
With Angular, the controller is who tells the View what the default value should be (not the other way around). The View would reflect that, and could update it (with ng-model), but it is initially set by the controller.
So, the controller knows because the controller sets it up:
.controller("studentController", function($scope){
$scope.student = "default name";
});
Related
I have a input text like in one page. I would like to store the information from this input with angular, so when moving to another page I could display it in another input text.
I have tried with ng-model and ng-init
<input type="text" ng-model="inputText" ng-init="userText">
Having in the controller
$scope.userText = $scope.inputText;
But it doesn't seem to work. You can see a working plunker here. Thanks in advance!
PS: I need to do it between two pages (not with a single page and then routing).
basically what happens is that your variables are reseted when you change page. You can achieve what you want using localstorage. Here follows an example
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.saved = localStorage.getItem('userText');
$scope.userText = (localStorage.getItem('userText')!==null) ? $scope.saved : "";
$scope.editText = function(){
localStorage.setItem('userText', $scope.userText);
}
});
PAGE 1:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
Home
Another page<br><br><br>
<input type="text" ng-model="userText" ng-keyup="editText()">
</html>
PAGE 2:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
Home
Another page<br><br><br>
<input type="text" ng-model="userText" ng-keyup="editText()">
<h1>This is Another Page!</h1>
</body>
</html>
please check this plunker: http://plnkr.co/edit/eyywQGgWjhC8gS7Wprcw?p=preview
You can store in rootscope/ localstorage/ URL as parameter . The retrieve value on your destination page
I'm a newbie to this thing called 'AngularJS' so I got stuck at one point.
Consider the below code sample :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-bind="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In above example why can't I bind the value of application variable "firstName" to the HTML input text control usng "ng-bind"?
and suppose I write the code as below :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
In above example I can bind the value of application variable "firstName" to the HTML input conrol using "ng-model".
Can someone please clarify me the difference between the above two codes in easy to understand language?
Also, look at below code snippet :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="" ng-init="firstName='John'">
<p>The name is <span ng-bind="firstName"></span></p>
</div>
</body>
</html>
In the above(third) example how could I be able to bind the value of application variable "firstName" to the <p> tag?
Someone please explain me.
Thanks.
ng-bind makes a one way binding between your controller and the view. In this case, the view will only reflect changes made in the controller, but not viceversa. This is the same as using the double brackets notation {{variable}}
In the other hand, ng-model makes a double binding, that is, changes made in the view (normally in an input form), will be accesible automatically in the controller, and changes made in the controller will be updated in the view
check this answer: https://stackoverflow.com/a/12420157/5186787
In regard to the snippet, you could just do:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller='myController'>
<p>{{firstName}}</p>
</div>
</body>
</html>
Which implements a one way bind. So, if you have your application defined in this way:
var app=angular.module('myApp',[]);
app.controller('myController', ['$scope',function($scope){
$scope.firstName = 'John Doe';
}]);
It would make a one-way binding between your variable firstName in the controller and the view.
It is better to use controllers for this type of work.
I have a simple form.
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="field" name="myField" />
<div ng-show="myForm.myField.$error" style="color: red">
{{myForm.myField.$error}}
</div>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="controller.js"></script>
</body>
</html>
And i have angular controller
angular.module('MyApp',[])
.controller('AppCtrl', function($scope) {
$scope.myForm.myField.$error = "just to see it work";
});
Why do I get error '$scope.myForm is undefined'?
You have model, module and controller a little confused. My solutions uses Angular 1.2, although you will soon need to move to Angular 2.
Here is my reworking of your example:
<html lang="en" ng-app="MyApp">
<head>
</head>
<body ng-controller="AppCtrl as ctrl">
<form name="myForm" id="myForm">
<input type="text" ng-model="ctrl.myField" name="myField" />
<div style="color: red">
{{ctrl.myField}}
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js">
</script>
<script src="controller.js"></script>
</body>
</html>
And in the controller.js:
angular.module('MyApp',[])
.controller('AppCtrl', [function() {
this.myField = "just to see it work";
}]);
In the above, I have put "myField" in the scope of the controller "AppCtrl". I have put the whole page under the control of the module 'MyApp'. You can either inject the model with "ng-bind" or use the curly bracket notation in the body of the div to bind to the "myField" model of "ctrl". I have used the latter but be aware this binding will be established after the page has been parsed.
If you load this all now, you should see "just see it work" in red under the text field, and also inside the text field. When you edit the text box, the red text will change in sync. Once you have that working, you will never want to stop learning more about Angular!
I should add that this model has a single attribute. To generalise this you will need to create a model with several properties (one for each input element), so that a JSON object is returned when the form is submitted.
You can't have dots in your variable name.
Try myFormMyFieldError instead of myForm.myField.$error.
Additional: Rather than using the attribute style, use a CSS file.
Is there any way to change AngularJS urls with ng-model?
var scotchApp = angular.module('scotchApp', ['ngRoute']);
scotchApp.controller('mainController', function($scope) {
$scope.gettext = function (){
};
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="eventChange.js"></script>
</head>
<body ng-controller="mainController">
<div class="container">
<div class="row">
<div class="col-sm-1">Search</div>
<div class="col-sm-3"><input type="text" class="form-control" ng-model="search" ng-change="gettext()"></div>
</div>
</div>
</body>
</html>
I need to change the URL into something like this http://localhost/angulRoute/search=myVal when user type 'myVal' in the search box (actually inside gettext() function with search value)
You can do something like this in your controller:
$scope.query = $location.search().q;
$scope.$watch('query', function(newValue) {
$location.search('q', newValue);
});
You'd need to inject $location into your controller, and make sure in your route config includes:
reloadOnSearch: true
That would result in a URL like http://localhost/myRoute?q=myVal
Note: I would also add ng-model-options="{updateOn:'blur'}" to your input, to prevent updating the URL on every key press.
EXAMPLE
Here is a working example of how to do this: http://plnkr.co/edit/tphqPeJ0dO74Ux7WpXlU?p=preview
Note that, because of the way plnkr.co works, you won't see the URL changes in the address bar on that site. If you download the code and run it locally, the URL would be updated in the address bar.
Hi I found a javascript solution for that.
$scope.gettext = function (search){
window.history.pushState("object or string", "Title", "/angulRoute/search="+search);
};
with <input type="text" class="form-control" ng-model="search" ng-change="gettext(search)" > worked for me. However anyone have an AngulerJs solution they are welcome :D
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)