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>
Related
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>
I am learning how to use angularjs and just need a good place to start. I tried to write this simple app but cant get it working, so can someone help me fix it, and help point me in the right direction.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck">
<h1>{{palcheck}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var str = $scope.palcheck
$scope.check = str === str.split('').reverse().join('');
ng-if="palcheck"
});
</script>
</body>
</html>
I would add a change listener to the input, and then set the value of it is is a match in that listener.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="palcheck" ng-change="onChange()">
<h1>{{palcheck}}</h1>
<h1>Is Match: {{isMatch}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.onChange = function(){
$scope.isMatch = str === str.split('').reverse().join('');
};
});
</script>
</body>
</html>
I am refactoring some code and have a small issue. I am passing a count variable of the scope to a func and incrementing it but the original value is not updated. Here is a sample:
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
plunker: http://plnkr.co/edit/f6fle98TSmINuD6CCz3Q?p=preview
You can see the output in the console.
Can You offer me some solution?
My code
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var vm = this;
vm.counter = 0;
vm.change = function(counter) {
vm.counter++;
console.log(counter);
};
}]);
</script>
<div ng-controller="ExampleController as e">
{{e.counter}}
<input type="checkbox" ng-model="confirmed" ng-change="e.change(e.counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
Please instead of counter++ inside the change-function use $scope.counter++. The answer to your question why original value is not updated is that you are not updating the scope ($scope.counter) in your current code.
I think your problem is that you are mixing variables because its name. Maybe changing counter variable name can help you:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(variable) {
variable++;
console.log(variable);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
The right way is update $scope.counter value:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
$scope.counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
I hope this help!
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>