<!DOCTYPE html>
<html ng-app="">
<head>
<title>hello</title>
<script type="text/javascript" src="lib/angular.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>{{name}} </p>
</html>
I try to do a very simple angular project, but there is something wrong. In the output page variables names appeared, not values as expected.
You need to have the module and controller declared, those two are missing with your code,
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
DEMO
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>{{name}} </p>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
});
</script>
</body>
</html>
Check sample angularjs code
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.name = "Hello";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<p>{{name}} </p>
</div>
</body>
Related
I am new to AngularJS. Want to get values from 2 input text boxes, add them and then display them in a 3rd text box.
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.sum = ( $scope.a + $scope.b );
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input ng-model="a" type="number">
<input ng-model="b" type="number">
<input ng-model="sum" type="number">
</form>
</div>
</body>
</html>
You can achieve without creating any function just put value = {{a+b}} in you 3rd input tag
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.sum = ( $scope.a + $scope.b ); // this will assign value sum only when one time- when controller init happen and that time a and b both is undefined
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
<input ng-model="a" type="number">
<input ng-model="b" type="number">
<input value="{{a + b}}" type="number">
</form>
</div>
</body>
</html>
Use the ng-change directive:
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.a = $scope.b = $scope.sum = 0;
$scope.updateSum = function() {
$scope.sum = $scope.a + $scope.b;
};
});
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form>
A=<input ng-model="a" ng-change="updateSum()" type="number"><br>
B=<input ng-model="b" ng-change="updateSum()" type="number"><br><br>
Sum=<input ng-model="sum">
</form>
</div>
</body>
</html>
The input only shows as plane html rather than angularjs input material. I cannot find a exact solution for my problem
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>
<div ng-app="myApp" ng-controller="myCntrl">
<div ng-bind-html="text1"></div>
</div>
<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize', 'ngAria'
])
.controller('myCntrl',function($scope,$sce){
var text1=$sce.trustAsHtml("<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
"<input required name='name' ng-model='user.name'></md-input-container>");
$scope.text1=text1;
})
</script>
This is working.
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>
<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize'
])
.controller('myCntrl',function($scope,$sce){
var text1=$sce.trustAsHtml("<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
"<input required name='name' ng-model='user.name'></md-input-container>");
$scope.text1=text1;
}).directive('bindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
}, function (value) {
element.html(value);
$compile(element.contents())(scope);
});
}
};
}]);
</script>
<body>
<div ng-app="myApp" ng-controller="myCntrl">
<div bind-html-compile="text1"></div>
</div>
</body>
</html>
You can bind html from controller like this way, but you are binding your model from controller (ng-model='user.name') that is not right way
Controller
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize', 'ngAria'
])
.controller('myCntrl',function($scope,$sce){
var text1="<md-input-container class='md-block' flex-gt-sm><label>To Location</label>"+
"<input required name='name' ng-model='user.name'></md-input-container>";
$scope.text1=text1;
})
View
<div ng-app="myApp" ng-controller="myCntrl">
<div ng-bind-html="trustAsHtml(text1)"></div>
</div>
I found a more simple solution without directive.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.12/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.12/angular-material.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular-sanitize.js"></script>
<script>
angular.module('myApp', ['ngMaterial', 'ngMessages', 'ngSanitize'
])
.controller('myCntrl',function($scope,$sce,$compile){
var mc=this;
mc.addInput=function(){
var html="<md-input-container class='md-block' flex-gt-sm><label>To Loon</label>"+
"<input required name='name' ></md-input-container>";
angular.element(document.getElementById('value')).append($compile(html)($scope));
}
});
</script>
<body>
<div ng-app="myApp" ng-controller="myCntrl as mc">
<button ng-click="mc.addInput()">ClickHere</button>
<div id="value" ></div>
</div>
</body>
Here is a small piece of code, where I am trying to render an HTML of my choice based on the "type" key of the json. Unfortunaltely, I don't see any error on executing the code nor am I getting the required HTML.
I am very new to Angular
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in customers">
<div ng-switch="m.type">
<div ng-switch-when="text">
<h1>Hello</h1>
<p>Hello World.</p>
</div>
</div>
</div>
</div>
</body>
</html>
I hope it will help you.
<html>
<head>
<title></title>
</head>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<script>
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope) {
$scope.GenerateTable = function () {
$scope.Customers = [
{type:'email', name:'email',value:'',placeholder:"Your email here",required:true},
{type:'text', name:'password',value:'',placeholder:"Your password here",required:true},
{type:'number', name:'firstname',value:'',placeholder:"Your firstname here",required:false,min:"10",max:"100"},
];
$scope.IsVisible = true;
};
});
</script>
<div ng-app="MyApp" ng-controller="MyController">
<input type="button" value="Generate Table" ng-click="GenerateTable()" />
<hr />
<div ng-repeat="m in Customers">
<div><input type="{{m.type}}" value="{{m.Name}}" placeholder="{{m.placeholder}}" required="{{m.required}}" /></div>
</div>
</div>
</body>
</html>
Unable to focus on textbox on button click:
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
//Here How to focus my textbox
}
};
});
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username" />
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
document.getElementById("UserName").focus();
}
};
});
You can use angular.element to select your input box and can call focus(). Try something similar to below::
<html ng-app="CommonApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="HeadCtrl" ng-init='username=""'>
<input id="UserName" type="text" class="login_boxdecor" ng-model="username"/>
<div class="login_btn_outer">
<div class="login_btn_outer2" ng-click="cLgn();">
<a class="btn">Login</a>
</div>
</div>
</body>
</html>
var myApp = angular.module('CommonApp', []);
myApp.controller('HeadCtrl', function($scope){
$scope.focusText =false;
$scope.cLgn= function(){
if($scope.username.trim().length==0)
{
angular.element("#UserName").focus();
}
};
});
I am trying to store the input values in JSON object and binding the JSON object to Span. its not working.
Direct ng-repeat is working, but if i bind it from JSON objeci its not working.
My code:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
<script type="text/javascript">
var JSONObject = {"name":"{{yourName}}"
};
document.getElementById("jname").innerHTML=JSONObject.name;
</script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<p>
Name: <span id="jname"></span>
</p>
</div>
</body>
</html>
In header its working, in span i am binding from JSON its not working.
I tried in jsbin the same code its working.but if i create my own html its not working.
Help me.
Thanks in Advance,
Stephen.L
Move your code to the end of the body. document.getElementById("jname").innerHTML=JSONObject.name; is executing before the span is added to the DOM...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"> </script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
<p>
Name: <span id="jname"></span>
</p>
</div>
<script type="text/javascript">
var JSONObject = { "name":"{{yourName}}" };
document.getElementById("jname").innerHTML=JSONObject.name;
</script>
</body>
</html>
JSBin... http://jsbin.com/qeseyibi/1/edit?html,output