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>
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>
<!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>
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 try to remove hastag from url in my website, but i don't know exactly how..
i researched on the internet, and i find it's neccesary to insert a location providers in my controller, but...where?
Here si my controller code:
'use strict';
(function() {
var app = angular.module('store', ['store-products']);
app.controller('StoreController', ['$log', function($log) {
this.products = gems;
$log.info('Dependency Info');
}]);
app.controller('PanelController', function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
app.controller('ReviewController', function() {
this.review = {};
this.addReview = function(product) {
product.reviews.push(this.review);
this.review = {};
};
});
var gems = [
{
name: 'Dodecahedron',
price: 2.95,
description: 'Dodecahedron description...',
images: [
{
full: 'http://courseware.codeschool.com.s3.amazonaws.com/shaping-up-with-angular-js/images/gem-01.gif'
}
],
canPurchase: true,
soldOut: false,
reviews: [
{
stars: 5,
body: 'Awesome website',
author: 'user1#schimbatot'
},
{
stars: 4,
body: 'Good!',
author: 'user2#schimbatot'
}
]
},
];
})();
And module code:
(function() {
var app = angular.module('store-products', []);
app.directive('productTitle', function () {
return {
restrict: 'E',
templateUrl: 'product-title.html'
};
});
})();
Also, find it's neccesary to add <base href="/"> in my index.
But, where it's neccesary to insert the $locationProvider command? ( $locationProvider.html5Mode(true);)
EDIT, here is my index from page:
<!doctype html>
<html ng-app="store">
<head>
<title>AngularJS App</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="application.css" />
<script src="app.js"></script>
<base href="/">
</head>
<body>
<h1>AngularJS App</h1>
<div class="container" ng-controller="StoreController as store">
<h1>AngularJS App</h1>
<div ng-repeat="product in store.products">
<h3>
<product-title></product-title>
</h3>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{active:panel.isSelected(3)}">Reviews</li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description</h4>
<blockquote>Product description...</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Specifications</h4>
<blockquote>None yet</blockquote>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>Reviews</h4>
<blockquote ng-repeat="review in product.reviews">
<b>Stars: {{review.stars}}</b>
{{review.body}}
<cite>by: {{review.author}}</cite>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<b>Stars: {{reviewCtrl.review.stars}}</b>
{{reviewCtrl.review.body}}
<cite>by: {{reviewCtrl.review.author}}</cite>
</blockquote>
<select ng-model="reviewCtrl.review.stars" required>
<option value="1">1 star</option>
<option value="2">2 star</option>
<option value="3">3 star</option>
<option value="4">4 star</option>
<option value="5">5 star</option>
</select>
<textarea ng-model="reviewCtrl.review.body" required></textarea>
<label>by:</label>
<input ng-model="reviewCtrl.review.author" type="email" required />
<input class="btn" type="submit" value="Submit" />
</form>
</div>
</section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.min.js"></script>
<script src="products.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
Thank for help me!
You need to specify the html5 mode in the config like in below
var app = angular.module('store', ['store-products'])
.config(['$locationProvider', function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Read more about hashbang mode and html5 mode
[here] (https://docs.angularjs.org/guide/$location)