I have following ng-repeat
<div ng-repeat="page in pages">
<input type="text" ng-model="page.name"
</div>
Basically this will show page.name multiple times for same name. Problem is my data being returned is in collection so I cant just use the name property.
Can you please tell me how can i just show page.name only once.
I'd still say your better off pulling this data into it's own property but here's a lazy way to achieve the goal:
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<input type="text" ng-model="pages[0].name"/>
</body>
</html>
JS
// Code goes here
angular.module("myApp", []).controller("MyCtrl", function($scope){
$scope.pages = [{name:"Page1"},{name:"Page2"}];
})
Plunkr: http://plnkr.co/edit/UmRSVek3psKoklxVKBfI?p=preview
Related
I am new to Angular JS and was studying through tutorial and then found something weird.
Let us assume in a JS file i have defined a controller as
//Create the module
var myApp = angular.module("myModule", []);
// Creating the controller and registering with the module all done in one line.
myApp.controller("myController", function ($scope) {
$scope.message = "AngularJS Tutorial";
});
Now i have created a html page where i use this controller
<!doctype html>
<html ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
<div>
{{ message }}
</div>
</body>
</html>
This returns me Output as
AngularJS Tutorial
Now when i wrongly type the name of controller
<!doctype html>
<html ng-app="myModule">
<head>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/Script.js"></script>
</head>
<body>
<div ng-controller="myController">
{{ message }}
</div>
<div ng-controller="myController1">
{{ message }}
</div>
</body>
</html>
In this case it gives
AngularJS Tutorial
{{ message }}
Now though the myContoller1 does not exists and i get a error also but still
{{message}} not exists in 1st try(1st method where no controller defined in div) and should have been printed same as it is.
Can anyone explain me this behavior?
Scope of controller will only applicable within a DOM on which it applied.
In first case you didn't see {{message}} value in second div because you had that binding outside myController div. It would have work if you have wrapped bindings in myController div.
<div ng-controller="myController">
<div>
{{ message }}
</div>
<div ng-controller="myController1">
{{ message }}
</div>
</div>
Where as in 2nd case you don't have myController1, so angular failed while creating instance of myController1 controller(tip: check console for error, if something doesn't work in JS).
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 and JavaScript. I want to use ng-include to import elements form htmls, the elements are simple for display. To illustrate, here I have 3 html files, "123.html", "456.html", and "789.html".
For "123.html":
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="myApp">
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
</body>
</html>
For "456.html":
<div>
<P> Here is the 456. </P>
</div>
And for "789.html":
<div>
<P> And here is the 789. </P>
</div>
I see some ng-include examples, but all of them got ng-controller and additional JavaScript file. So my question is, if I just want to display html elements, do I still need ng-controller for the code?
P.S. The code above cannot correctly work, could someone help figure out the problem for this very simple example? The browser is Firefox. Thanks.
Angular must at least have the module myApp available since that's what you are declaring in ng-app
It can't bootstrap without that module and errrors in your browser console should be telling you that it can't find it.
If all you are doing is using angular for includes why not just use server side includes?
So you don't have an app called myApp and would get an error referencing a module that is not defined. In the code below you can see I removed it.
That being said you can define templates using the script tag with ngTemplate.
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
Example using both a script template and a separate file.
This is the full working code:
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app>
<p> Here we have 123. </p>
<div class="container">
<div ng-include="'456.html'"></div>
<div ng-include="'789.html'"></div>
</div>
<script type="text/ng-template" id="456.html">
<div>
<P> Here is the 456. </P>
</div>
</script>
<script type="text/ng-template" id="789.html">
<div>
<P> And here is the 789. </P>
</div>
</script>
</body>
</html>
I wanted to create a radio button list from an array of elements using angular js
ng-repeat.
Any example will help, thanks
Here's a simple example
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<label ng-repeat="element in elements">
<input type="radio" ng-value="element"/ >
{{element}}
</label>
</body>
</html>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.elements = [1,2,3,4,5];
}]);
Plunkr
http://plnkr.co/edit/hNI5kjMHW6G9kSUeJtOp?p=preview
Use the directives ng-app and ng-controller to connect your controller with the view. In your controller, include $scope as a dependency and then set a variable on it containing an array of elements.
Use ng-repeat on the label element, and insert the value of the element with Angular expressions.
Hope this helps.
I am trying to change my textbox value after click on a button using javascript and change ng-model value of angular js.
The Javascript code working fine and change the textbox value, but I also want to change my ng-model value according to the text box.
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"></script>
<script>
function tryi()
{
document.getElementById('newtry').value="any value";
}
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" id="newtry">
<input type="button" onclick="tryi();"value="click here">
<hr>
<h1>Hello {{yourName}}!</h1><hr>
</div>
</body>
</html>
I think you have included angular-resource and not included angularjs
add this line
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
the code is working fine
Here is the plunkr link: http://plnkr.co/edit/CPX1Mhn2CkmY6wZWHvya?p=preview