So, what I am trying to do is to make a few checkboxes on a page. The idea is that if I check a checkbox and then save the info in Mongo db, then reload the page, then the checkbox I checked earlier should stay checked on reload.
Let me make this Plnkr
If the plnk doesnt load, Let me enter the code as well.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.45/angular2.js" data-semver="2.0.0-alpha.45" data-require="angular.js#*"></script>
<script src="app.js" data-semver="2.0.0-alpha.45" data-require="angular.js#*"></script>
<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-controller="main">
<label>Test checkbox</label>
<input type="checkbox" id="" ng-model="test.checkbox" value="test" name="testCheckbox" ng-checked="">
<br />{{ greeting }}
</body>
</html>
Please check and let me know a solution, guys!
TIA.
You may need to use localStorage in HTML5.
Below will help you -
keep checkboxes checked after page refresh
You need to get data from Monogo onload
OR
you can use localStorage
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 am trying to display a plain html/css loading spinner on first load in my Angular APP. The spinner code is included in my index.html.
However, the dom seems not to be rendered until my angularjs APP starts kicking in, causing a very lengthy display of a white screen until this finally happens. Is there any way to prevent that?
I would like to understand how to load my plain html/css spinner right after the css code in the head is done loading so as to improve user experience.
Test on webpagetest.org seem to confirm this diagnosis (the /settings, /introductions, /menus lines are all calls to an external API done by an AngularJS service before render):
Here is a simplified version of my build code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
</body>
</html>
whatever the complexity of your application,all your controllers are within the same angular application, all scopes within the same application inherits from the same root, whatever you define on the $rootScope will be available to all child scopes.
we have two ways to resolve this problem:
use $broadcast(), $emit() and $on() that facilitate event driven publisher-subscriber model for sending notifications and passing data between your controllers.(professional solution)
declare $rootScope variable and watching changement.(simple way)
It turns out the problem was coming from "render-blocking javascript", I had to add the "async" tag to my JS to fix it.
When adding async to both my lib.js and app.js, I had an issue with app.js loading before angular scripts were loaded (thus causing the APP to throw an error). In order to solve this issue, I combined my lib.js and app.js into one single file and then added the async tag.
My final build code looks like that (the magic happens on the final "script" tag):
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<!-- This app.js now also contains lib.js from my question !-->
<script src="js/app.js" async></script>
</body>
</html>
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
I'm trying to use Angular Agility for form validation. I'm trying to get a simple example working with the correct error messages and colours outlining the form element. So far I'm not getting very far. I've had a look at the demo examples but there's no clear code examples, unless I'm doing something drastically wrong.
Can anyone show me an example of how to use this properly?
For example how would I be able to get the following html to show the error message and the validation outline around the form element?
From the documentation?
<div ng-form="exampleForm" class="form-horizontal">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
Thanks in advance.
Assuming you have the angular.js and angular-agility.js, here is a working sample
<!Doctype html>
<head>
<link href="https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div ng-app="angularAgilitySimpleExample" ng-controller="indexCtrl">
<div ng-form="exampleForm">
<input type="number" aa-field-group="person.age" min="0" max="140" required>
</div>
</div>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-agility.js"></script>
<script type="text/javascript">
angular.module('angularAgilitySimpleExample', ['aa.formExtensions', 'aa.notify']);
</script>
</body>
</html>
Incase, you do not see the styling, please download the css from https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/aa.formExtensionsOptional.css and use it locally
You can find the complete example from angular-agility team https://raw.githubusercontent.com/AngularAgility/AngularAgility/master/simple_example/index.html
This plnkr shows how to validate the firstname, show the error message and show green/red outline round the form element:
http://plnkr.co/edit/V4vDiu?p=preview
<!DOCTYPE html>
<html ng-app="exampleModule">
<head>
<link rel="stylesheet" href="style.css" />
<script src="http://code.angularjs.org/1.2.8/angular.js"></script>
<script src="aa.formExtensions.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="exampleController" ng-form="exampleForm">
<div>
<input type="text" required="" ng-minlength="2" ng-maxlength="30"
aa-auto-field="firstName" />
</div>
<button aa-save-form="save()">Save</button>
</div>
</body>
</html>
I'm trying to change a checkbox value based on another checkbox value, but the change doesn't seem to have any effect in the model.
Here is a code example of the issue:
http://plnkr.co/edit/eFOn3cejwKU01LkKNC1s?p=preview
HTML file
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<pre>
A value: {{a}}
B value: {{b}}
</pre>
A <input type="checkbox" ng-model="a" />
B <input type="checkbox" ng-model="b"
ng-disabled="a"
ng-checked="!a && b"
/>
</body>
</html>
And an empty controller:
var app = angular.module('main', [])
.controller('DemoCtrl', function($scope) {
});
As far as I've read, a Dom change doesn't change the model, and when I try to call $apply, the digest is already running, so I'm a bit lost.
I don't want to put a $watch on the first checkbox because my example is already quite complex.
Is there any alternative solution that does not involve writing js code in the controller for this problem?
Please see http://plnkr.co/edit/lbOWO4oLbTghactUETTD?p=preview
You missed reference to script
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
Here is a plunker showing a way to set the b value in the model to false when a is clicked and set to true, without modifying the controller.
http://plnkr.co/edit/rL6tTp5NfBzroZ2zSOgO?p=preview
And here is what I modified to do it - see the ng-change
A <input type="checkbox" ng-model="a" ng-change="b=!a" />