I'm learning Angular.js. I want to make a form where the user can see the output has they fill it out.
Here's test.html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" ng-controller="graphicLanguageCTRL" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
</div>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</body>
Here's test.js:
var app= angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.master= {
hed: ''
};
});
I want the stuff typed into the input tag to be visible in the h1 tag. But when I type into the input tag, nothing appears in the h1 tag.
How do I fix this?
There are some errors in your code:
You are using ng-bind outside of controller
You are initializing graphicLanguageCTRL twice
In your script you are setting the wrong variable name
Below is the fixed code:
html
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
JS
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL", function($scope){
$scope.graphic = {
hed : ''
};
});
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {
hed: ''
};
});
or
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.graphic = {};
$scope.graphic.head = ''
});
2 things need to be taken care of:
Do not nest and use the same ng-controller
Move the h1 inside
the ng-controller block
Fixed version:
var app = angular.module('charter', []);
app.controller("graphicLanguageCTRL", function($scope) {
$scope.graphic = {
hed: ''
};
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body ng-app='charter'>
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed">
<br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
</html>
Related
I have a custom directive with an input box. This input is used in many of the pages. I want to require this input field in some of the forms and exclude in others. What should be the best approach to do this?
I am submitting the form from controllers so not sure how this would work in angular?
I am new to angular and not sure how this all will be tie up together.
So essentially this is what I want :
<form name="myForm" >
<div ng-contoller="Somecontroller as vm" >
<custom-directive>
this will create an input box like this :
<input type="text"> </input>
</custom-directive>
</div>
</form>
When I submit the form I want to ensure that if the text box inside the directive does not have text then I should get an error.
Hi, this is your custom directive, with this example you can handle what you want...also you can use directive in all you form but remember do not use with same ngModel, and last one thing always set ngModel in this directive.
var app = angular.module("app", []);
app.directive("requiredInput", function () {
return {
restrict: "E",
required: "^ngModel",
template: "<input type='text' ng-model='ngModel' ng-required='true'>",
scope: {
ngModel: "="
}
}
})
<!DOCTYPE html>
<html ng-app="app">
<head>
<title></title>
</head>
<body>
<h1>form 1</h1>
<form name="form">
<required-input ng-model="form.myInput"></required-input>
<required-input ng-model="form.myInput2"></required-input>
{{myInput}}
<button ng-disabled="form.$invalid">submit</button>
</form>
<h1>form 2</h1>
<form name="form2">
<required-input ng-model="form2.myInput"></required-input>
{{myInput2}}
<button ng-disabled="form2.$invalid">submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp">
<w-test-directive></w-test-directive>
<script>
var app = angular.module("myApp", []);
app.directive("wTestDirective", function() {
return {
template : "<input type='text'/>"
};
});
</script>
</body>
</html>
I am new in angularjs. What I am trying to do is adding a simple controller in an angular app. So, my code is like this-
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<div ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button Disable
</p>
<p>
{{ mySwitch }}
</p>
</div>
</div>
</body>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>
So, it is working perfectly-
When I addd ng-controller="anything" as such...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="">
<div ng-controller="anything" ng-init="mySwitch=true">
<p>
<button ng-disabled="mySwitch">Click Me!</button>
</p>
<p>
<input type="checkbox" ng-model="mySwitch"/>Button Disable
</p>
<p>
{{ mySwitch }}
</p>
</div>
</div>
</body>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</html>
Nothing seems to work.
Can anyone please help, what I am doing wrong?
Thanks in advance for helping.
Looks like you have not defined a controller. Observe the following...
<div ng-app="app">
<div ng-controller="ctrl">
[...]
angular.module('app', []).controller('ctrl', function($scope) {
$scope.mySwitch = true;
});
JSFiddle Link - working demo
And as always, refer to the Understanding Controllers docs for more information.
in the first step you need to declare a name for your app
for exemple
Module.js
var home = angular.module("home",['ngRoute']);
after that call this var in your controller
Controller.js
home.controller('homeController',function($scope){
$scope.switch = value;
});
in your code html
index.html
<!DOCTYPE html>
<html ng-app="home">
<div ng-controller="homeController" >
{{switch}}
</div>
A simplified version of the code:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.addressForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
which looks in the browser like this:
When I click "REMOVE" and then "NEXT" - javascript error is produced:
Error: $scope.addressMainForm.addressForm is undefined
Why is it undefined if there is clearly still one element remaining in the array? Everything otherwise works fine (console.log output), until all the elements are removed but the last one and "NEXT" is clicked.
When you call $scope.addressMainForm.addressForm.$valid , you are attempting to call check to see if the adressForm element is valid, but your remove function has removed the addresses entry associated with that element. So the form indeed still exists, but that call becomes illegal.
Try this:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
Here i have two ng-apps and there controllers.Here is i want to access controller value in other controller with there different ng-apps .But i am getting error.please help me out.
Thank you.
Html:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="service.js"></script>
</head>
<body>
<div id="myDiv1">
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="multiply()">X<sup>2</sup></button>
<p>Result 1: {{result}}</p>
</div>
</div>
<div ng-app="myDiv2">
<div ng-controller="MyController2">
<p>Enter a number: <input type="number" ng-model="numberSecond" />
<button ng-click="multiplyValue()">X<sup>2</sup></button>
<p>Result 2: {{result2}}</p>
</div>
</div>
</body>
</html>
Controller.js:
angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() {
var factory = {};
factory.multiply = function(a) {
return a * a
}
return factory;
});
var mainApp = angular.module("mainApp", ["myReuseableMod"]);
mainApp.controller('CalcController', ['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) {
$scope.multiply = function() {
$scope.result = $myReuseableSrvc.multiply($scope.number);
}
$scope.aB=function()
{
alert("hiii");
}
}]);
var mainApp2 = angular.module("mainApp2", ['mainApp']);
mainApp2.controller('MyController2',['CalcController' '$scope','$myReuseableSrvc',function(CalcController,$scope, $myReuseableSrvc) {
console.log('init B');
$scope.multiplyValue = function() {
$scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond);
CalcController.aB(); //here i want to acess controller 'CalcController' method.
}
}]);
Here is my plunker:
http://plnkr.co/edit/6QyDuV330YlgXy16S2YX?p=preview
You have to manually bootstrap them.
See :
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application http://docs.angularjs.org/api/ng.directive:ngApp
I must not understand how to change the content of my <div> tag.
Here is my html file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="simple.js"></script>
<title>simple</title>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>
Here is my .js file:
function myFunction() {
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
}
When I click the button the alert pops up but the html does not change to "Hello World". It just stays the same :(
What am I doing wrong here.
Update: Thanks everyone! Here is what I have working now:
HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
</head>
<body>
<div id="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" id="myurl" size="100" /></p>
</form>
<button id='clickme'>Click me</button>
<button id='noclickme'>No Click me</button>
</div>
<script src="simple.js"></script>
</body>
</html>
My .js file:
function say_something(s) {
document.getElementById("results").innerHTML = s;
}
document.getElementById("clickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Hello World [" + url + "]");
});
document.getElementById("noclickme").addEventListener("click", function(){
var url = document.getElementById('myurl').value;
if (url==null || url=="") { alert("Please supply a url"); return false; }
say_something( "Goodbye [" + url + "]");
});
A button's default behaviour is to submit the form. In this case, the action being blank, it will try to submit to the current URL. You need to prevent that from happening. Also it's bad form to put Javascript inside your HTML like that - use addEventListener instead:
document.querySelector("#results button").addEventListener("click", function(e) {
e.preventDefault();
alert('hey');
document.getElementById("results").innerHTML = "Hello World";
});
Note you'll need to include your script before the </body> rather than in <head> when using this method, or use the DOMContentLoaded event listener.
Example jsFiddle
The reason is the form label.
when you click the button, the form will take an action,but you did not have a certified action, so the chrome will take the defautl action,ie reload the html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple</title>
<script src="simple.js"></script>
</head>
<body>
<div id="results" name="results"><!-- Results are displayed here -->
<form method="post" name="start" target="_blank">
<p>Enter url: <input type="text" name="myurl" size="100" /></p>
<button onclick="myFunction()">Click me</button>
</form>
</div>
</body>
</html>