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>
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
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>
I am new to Angular JS. I wrote a simple Angular code but the HTML is not rendering correctly or the expression is not getting evaluated. Please help with what i am missing. I am using angular.min.js minified(1.6).
<!DOCTYPE html>
<html ng-app>
<head>
<script src="js/angular.min.js"></script>
<script>
function MyFirstCtrl($scope) {
var employees = ['Catherine Grant', 'Monica Grant',
'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
};
</script>
</head>
<body ng-controller='MyFirstCtrl'>
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</body>
</html>
Set a root for your application with the ng-app directive and create a controller for your app from which you can handle the $scope:
var app = angular.module("ng-app", []);
app.controller("myCtrl", function($scope) {
var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
$scope.ourEmployees = employees;
});
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ng-app">
<div ng-controller="myCtrl">
<h2>Number of Employees: {{ ourEmployees.length}}</h2>
</div>
</div>
I have an application where a part of the page is implemented in angular js. I have a requirement where I have to reload the angular js template coming from the server, based on some user action. I have simulated the exact situation with a dummy code,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script type="text/javascript">
var angApp = angular.module("app", []);
angApp.controller("mainCtrl", function($scope){
$scope.p1 = "Hello1";
$scope.p2 = "Hello2";
})
angular.element(document).ready(function() {
angular.bootstrap(document, ['app']);
});
function add(){
var tpl = "<div>{{p1}}</div><div>{{p2}}</div>";
$("#container").html("");
$("#container").html(tpl);
angular.element(document).injector().invoke(function($compile){
var obj=$('#angApp');
var scope = angular.element($("#angApp")).scope();
$compile(obj.contents())(scope);
scope.$digest();
});
var angControllerScope = angular.element($("#angApp")).scope();
angControllerScope.$apply(function() {
angControllerScope.p1 = "New Hello";
});
}
</script>
<body>
<button type="button" onclick="add()">Add</button>
<div id="angApp" ng-controller="mainCtrl">
<div id="container">
<div>{{p1}}</div>
<div>{{p2}}</div>
</div>
</div>
</body>
On click of Add button how to get the value as "Hello" again.
Thanks.
Sorry if i have misunderstood what you mean but this is what i think you are trying to achieve...
var app = angular.module('app', []);
app.controller('mainController', function($scope) {
$scope.p1 = 'Hello';
$scope.add = function() {
$scope.p1 = 'New Hello'
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="app">
<div class="container" ng-controller="mainController">
<button type="button" ng-click="add()">Add</button>
{{p1}}
</div>
</body>
</html>
Found the solution. I had to recompile the template so that the binding with controller again works fine. Below link was useful.
https://gist.github.com/umidjons/1fb8ae674df4c71f85cf
I have updated the initial code with the working version.
Hi I am having trouble with this tutorial. I copied over the code but for some reason it is not working.
This is the html code
<!DOCTYPE html>
<html ng-app>
<head>
<title>Simple app</title>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js">
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller = "MyController">
<h1>{{ person }}</h1>
and their name:
<h2> {{person.name}}</h2>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
and here is the JS
var app = angular.module('app', []);
app.controller('MyController', function($scope) {
$scope.person = {
name: "Ari Lerner"
};
});
It doesn't look like the AngularJS code is being recognized. Any ideas?
Your app name in the module definition:
var app = angular.module('app', []);
doesn't match the one you reference in your dom:
<div ng-app="myApp">
Change your module definition to:
var app = angular.module('myApp', []);