So I am new to AngularJS and I was following a tutorial online where they give the following example on how to use ng-true-value and ng-false-value:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller="appCtrl as vm">
<p>
<input type="checkbox" ng-model="vm.bw" ng-true-value="on" ng-false-value="off" />
status: {{vm.bw}}
</p>
<script>
var app = angular.module("app", [])
app.controller("appCtrl", function(){
var vm = this
});
</script>
</body>
</html>
This works perfectly.
But the I realized they were using an old version of AngularJS (1.2.24), so I decided to change it to the current version (1.6.1) by simply changing the line
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
to
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
(Of course I checked if this file existed)
It turns out that this example doesn't work anymore. I click the checkbox but nothing happens.
Is there a working code for version 1.6.1?
Thank you in advance
The docs says everything is fine with the code you're using.
Try wrapping your
on/off
Statements with quotes (according to the docs) has angular trying to evaluate it.
Otherwise use "true/false" without quotes and see what happens!
Related
I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:
JavaScript:
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON:
A screenshot of the tickets (JSON) (
RESULT:
A screenshot of the result when I compile my code
Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static: (Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as id
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
RESULT:
Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.
If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.
When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.
I've done some tests and I believe the problem is in here:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.
Try using it this way:
<script type="text/javascript" src="/static/app/users.controller.js" th:src=b"#{baseUrl + '/app/users.controller.js'}"></script>
Or:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{~/app/users.controller.js}"></script>
If none of the above work, try removing the static.
Sometimes it happens when you forget to hit ng serve inside your terminal.
I tried doing some input validation on my inputs at my ejs template using angular, but it doesn't seem to be working correctly, this is the code i used (from w3schools):
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="">
<p>Try writing in the input field:</p>
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
It's supposed to ouput something like this:
The input's valid state is: false
But instead it just returns this:
The input's valid state is: {{myForm.myInput.$valid}}
So is it in any way possible to use ejs and angular together?
You need to have a module and a controller defined, script should be loaded inside the body/head
HTML
<!DOCTYPE html>
<html ng-app="store">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="">
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
</body>
</html>
Controller
var app = angular.module('store', []);
app.controller('StoreController', function($scope) {
});
DEMO
<html ng-app="insert_app_name_here">
<body ng-controller="insert_controller_name_here">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
</body>
</html>
I would set up my angular app like the above code. Also, including the script at the end of your body tag is good practice. Moreover, removing the .min from your script tag to just angular.js instead of angular.min.js helps you debug your code better since you will be using it for development and not for production.
In setting up your app, I would include an app.js file where the code goes like this:
angular.module('insert_app_name_here', [])
In setting up your controller, I would include a controller file (i.e. mainCtrl.js) where the code goes like this:
angular.module('insert_app_name_here').controller('insert_controller_name_here, function($scope) {
});
As to linking angular with ejs, i am unfamiliar with ejs, therefore i cannot provide a solution for that.
I am new to Angular JS. I am trying to start with the basic Hello World Program. Here is my plunk http://plnkr.co/edit/uW1fHB7a17gpvn341sn3?p=preview.
var MainController = function($scope){
$scope.message = "Hello, Angular!";
}
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
<h1>{{message}}</h1>
</div>
</body>
</html>
I created a simple controller and has a single model binding in that. It is not working for me. I am not able to get what the problem is. Can anybody please help me in getting started.
You need to boostrap your app properly and define your controller correctly. Observe the following changes...
<html ng-app="app">
angular.module('app', []).controller('MainController', MainController)
Plunker - updated demo
The AngularJS Getting Started resources should be packed with everything you'd like to know to get up and running
A couple things.
You need to create an angular module:
var app = angular.module('myApp',[]);
The second argument is an array of dependency modules. You don't need one here.
Then change ng-app to ng-app="myApp" referencing whatever you named your module.
Then you need to create a controller the angular way.
app.controller('MainController',MainController);
Here's the full script. Plunkr
function MainController($scope) {
$scope.message = 'Hello World';
}
var app = angular.module('myApp',[]);
app.controller('MainController',MainController);
Your original code works fine with Angular 1.0, just not with 1.4
Just thought it was worth mentioning, in case you were following a tutorial, and wondering why it wasn't working or something.
See this plunkr working fine in 1.0 with equivalent code to yours...
http://plnkr.co/edit/zbWvwxVDvhhVKgc5lGrr?p=preview
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="MainController">
{{message}}
</div>
</body>
</html>
and
var MainController = function($scope) {
$scope.message = "Hello, Angular!";
}
I am new to angularJS. So, may be I am asking very naive question. I have downloaded angularjs 1.3.16 and tried to make a very basic example, which is as given below. When I run in browser(chrome) it doesn't show any thing, while I am expecting, Input text box as well as Hello2 printed by its side.
<html>
<head>
<script src="../angular-1.3.16/angular.min.js" />
</head>
<body ng-app>
<input type="text">
Hello {{2}}
</body>
</html>
I don't know, what wrong am I doing ? Please help me out. Moreover, any more things that I should keep in mind, while developing angularjs code to avoid silly errors, then let me know.
You didn't close your script tag
Try like this
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
You need to close the script tag. Make sure you are using a valid version with valid path
<script src="../angular-1.3.16/angular.min.js" ></script>
Demo
Use ng-init like as
close the tag as below
<script src="../angular-1.3.16/angular.min.js" ></script>
This good for writing script
<body ng-app ng-init="firstName='Hello2'">
<input type="text">
{{ firstName }}
</body>
DEMO
Add App name in ng-app and close the script tag.
e.g.
<script src="../angular-1.3.16/angular.min.js"> </scrpt>
<body ng-app="myApp">
I am starting an O'Reilly book, AngularJS and the first example is as follows. On my end the "{{greeting.text}}" is showing up as that inside of being replaced with hello. I have the angular linked properly, and when I put it into jsFiddle it doesn't work as well, unless I change onLoad to no wrap- then it works.
I am using Webstorm on mac and I'm thinking my problem may be in there, but can't find anything that has fixed it.
Thank you for helping what is probably a simple solution.
HTML
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="angular.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
Controller
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Seems like something might be wrong with the way you are including angular. The following code works fine for me
index.html:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src ="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
controllers.js:
function HelloController($scope) {
$scope.greeting = { text: 'Hello'};
}
Open up your index.html in chrome and press Command + Option + J and when the developer tools open up, head to the network tab, refresh the page and see if you are loading your angular.js script correctly - if not, that is the issue.
Which angular version you use?
Mine is 1.3
angular.module('HelloApp', [])
.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = { text: 'Hello'};
}