I know how to react to user input in a textarea with ng-change in AngularJS. But how can I get the current input inside the Angular controller? I am missing something like $(this).value(); in jQuery.
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function() {
console.log("How do I get the current content of the field?");
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
ng-model
It'll store the value of an input, textarea, or select.
Your html should be like this:
<div ng-controller="ExampleController">
<textarea ng-model="myValue" ng-change="evaluateChange()" id="ng-change-example1"></textarea>
</div>
Then in your controller you can reference that with $scope.myValue
Hope that helps! :)
You can make use of $event for getting value of current element. Something like this
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.evaluateChange = function(obj,$event) {
var currentElement = $event.target;
console.log(currentElement.value);//this will give you value of current element
};
}]);
</script>
<div ng-controller="ExampleController">
<textarea ng-change="evaluateChange(this)" id="ng-change-example1"></textarea>
</div>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.myFunc = function(vals) {
console.log(vals);
$("#result").html(vals);
};
}]);
body{
background:#ffc10721;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl" align="center">
<p>Write something in the Textarea</p>
<textarea ng-change="myFunc(myValue)" ng-model="myValue"></textarea>
<br>Result :<p id="result"></p>
</div>
</body>
</html>
Related
i want to set the checkbox true or false dynamically , but while passing the data from controller to ng-model the checkbox status is not changing.
code
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="checkbox" ng-model={{applicable_status}}>
<label>Applicable</label>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.applicable_status = "true";
});
</script>
</body>
</html>
use ng-init directive to initialize application data.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl" ng-init="init()">
<input type="checkbox" ng-model=applicable_status>
<label>Applicable</label>
<pre ng-bind="applicable_status | json"></pre>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.init = function(){
$scope.applicable_status = true;
};
});
</script>
</body>
</html>
There is no need to use ng-init in your code.
You just need to remove those double quotes from "true" just assign normal true value to your variable, and it will work perfectly
Change your code from:
$scope.applicable_status = "true";
To
$scope.applicable_status = true;
It will work fine!
Check this JsBin
i dont want to load controller when page is load.i want to load it after click the button.
Here is my code, help me!!
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button onclick="myfunc()"></button>
Name: <input ng-model="name">
</div>
<script>
function myfunc(){
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
}
</script>
<p>Use the ng-model directive to bind the value of the input field to a property made in the controller.</p>
</body>
</html>
Instead of using onclick to load a controller, use the ng-click directive to invoke a function that loads the ng-model.
angular.module("myApp",[])
.controller('myCtrl', function($scope) {
$scope.myfunc = function() {
$scope.name = "John Doe";
};
});
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myfunc()">Load</button>
Name: <input ng-model="name">
<br>name={{name}}
</body>
I have a code that looks like this:
<div id="ng-div" ng-app="app">
<div ng-controller="dataController">
//... stuff that populates $scope.data
<button id="submit1" ng-click="processData()">Quote</button>
</div>
</div>
<script>
var app = angular.module('app', []);
app.controller('dataController', ['$scope', '$http', function($scope, $http) {
$scope.data = [];
$scope.processData = function(jobs) {
console.log($scope.data);
};
}]);
</script>
<button id="submit2">Quote (Outside scope)</button>
Due to legacy/design limitations, I need to have the Quote button to be somewhere else (which is outside the ng-app div/scope), for example the "submit2" button.
How can I trigger the processData() function using vanilla/jquery?
try this
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" id="myCtrl">
</div>
<button onclick="myFunction()">Click me</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.test = function(){
alert('Hii from controller');
}
});
function myFunction() {
angular.element(document.getElementById('myCtrl')).scope().test();
}
</script>
</body>
</html>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="{{firstName}}">
</div>
</body>
</html>
Here i'm trying to toggle the input field with the function as shown in code.I can see the value changing in the DOM but it is not rendered by angular properly...input is not toggling...Help me out...Thanks in advance
You don't need to do string interpolation, as ngDisabled accepts a expression pass direct firstName .
<input type="text" ng-disabled="firstName">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
You don't have to use interpolation operator {{}}
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName =false;
$scope.toggle = function(){
$scope.firstName =!$scope.firstName ;
};
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click=toggle()>ToGgLe</button>
<input type="text" ng-disabled="firstName">
</div>
</body>
</html>
How to save data from the form by clicking on the button?
I do not understand where the error is.
As planned, when you click on the data from the field stored in the variable "master"
For example I use this tutorial: http://www.w3schools.com/angular/angular_forms.asp
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body> <div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model="firstName"><br>
<button ng-click="copyData()">Click Me!</button>
</form>
<p>form = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {uder.firstName};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData=function(){
$scope.master1=angular.copy($scope.mas);
$scope.copyData();
}
});
</script>
</body>
</html>
First of all you have a typo error. Replace {uder.firstname} with {user.firstname}.
You should put some effort on understanding scopes and how you can use variables, that you declare on scopes.
You declare an input with ng-model="firstname", but on the controller you have a user object with the attribute firstname. You should change your form to:
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">RESET</button>
<button ng-click="copyData()">Click Me!</button>
and in your controller
app.controller('formCtrl', function($scope) {
$scope.user = { firstname:"", lastname:"" }; //init your user
$scope.master = user.firstname; //or user object itself, dont understand what exactly you would like to achieve
$scope.reset = function() {
$scope.user = $scope.master;
};
$scope.copyData=function(){ }//call your onclick event
//set the data, that you want directly here. Recursion will not work.
More information about scope and forms can definitely help you.
Firstly,There are some typos like $scope.mas and {uder.firstname}.
Inspite of that you are assigning a property to the $scope object using ng-model directive but in the controller you are trying to access it using an object called user which would be undefined at this point.Here is the change in your code
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
<button ng-click="reset()">
RESET</button>
<button ng-click="copyData()">
Click Me!</button>
</form>
<p>
form = {{user}}</p>
<p>
master = {{master}}</p>
The controller would be like
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
$scope.copyData = function () {
$scope.master = user.firstName;
$scope.master1=angular.copy($scope.master);
$scope.copyData();
};
Thanks to all!
A working version:
(function(angular) {
'use strict';
angular.module('scopeExample', [])
.controller('MyController', ['$scope', function($scope) {
$scope.username = 'World';
$scope.sayHello = function() {
$scope.greeting = 'Hello ' + $scope.username + '!';
};
}]);
})(window.angular);
-<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Angular JS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="angular.min.js"></script>
<script src="weather 2.js"></script>
</head>
<body ng-app="scopeExample">
<div ng-controller="MyController">
Your name:
<input type="text" ng-model="username">
<button ng-click='sayHello()'>greet</button>
<hr>
{{greeting}}
</div>
</body>
</html>