<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div style="color:{{color}}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
</body>
Color properties not working in IE, but chrome and firefox are working
Instead of using expression using {{}}, use ng-style directive.
<div ng-style="{color: color}">Testing</div>
Angular has issues when using style. Refer
This is the updated code:
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="{color:color}">Testing</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.color = "#996600";
});
</script>
As you are using angularJs you need to define ng-style
Try using the ng-style directive:
https://docs.angularjs.org/api/ng/directive/ngStyle
style is HTML attribute where as ng-style in Angular Attribute.
So that Please use below notation
<div ng-style="{color:color}">Testing</div>
if want angular Notification
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-style="color:{{color}}">Testing</div>
</div>
</body>
Related
I'm fairly new to Angular and I am trying to use ng-model and ng-controller to change some text using an input box.
This issue is that my initial text(john) doesn't show up on the page. Every tutorial says this is the way to do it. Am I missing some import or declaration somewhere in the component.ts?
Here is my code.
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
You forgot to inject $scope into your controller.
myApp.controller('myCtrl', ['$scope', function($scope) {
$scope.firstName = 'john';
}]);
Any dependency (services, filters..) you want to have in the controller you must inject.
Add the angular.js library as a <script> element:
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "john";
});
<script src="//unpkg.com/angular/angular.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
You didn't miss any declaration, but the problem might be because you did not include angular and your code inside html.
Try this:
<html>
<head></head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="./component.ts"></script> <!--your component file location-->
</body>
</html>
I don't see where you're including angular though. Add it into your code.
Example:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{firstName}}</h1>
Name: <input ng-model="firstName">
</div>
<script>
var app = angular.module('myApp', [])
app.controller('myCtrl', function($scope){
$scope.firstName = "johns";
});
</script>
</body>
</html>
I have a situation somewhat like this below code. I have a delete button on view cart page when it is pressed an API is called to delete the product and I just hide the product div tag to avoid page reload initially. How to hide multiple products one by one
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(){
//WHAT SHOULD GO HERE
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide()" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
You can have following in your HTML:
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)"
ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}</h5>
Now, your hide() function would look like this,
$scope.hide = function(index){
$scope['hide'+index] = true
}
That should hide numbers on click.
Here's working example!
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.hide = function(index){
$scope['hide'+index] = true
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-hide="hide{{$index}}" ng-click="hide($index)" ng-repeat="x in [0,1,2,3,4,5,6]">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
if you want to hide the product div tag to avoid page reload initially
just get type button without type="submit" ( inside <form></form> )
<button type="submit" > to >>> <button ng-click="hide()">
Update your COntroller like that :
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list=[0,1,2,3,4,5,6]
$scope.hide = function(x){
//WHAT SHOULD GO HERE
$scope.list.splice(x, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in list">{{x}}</h5>
</div>
</body>
</html>
ng-hide is just css(display:none) way hide element. ng-if is add/remove DOM element. (we can see if u hide element, ng-if we can't see).
You try remove. Just see the example.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data = [0,1,2,3,4,5,6];
$scope.hide = function(index){
// in api call success function
$scope.data.splice(index, 1);
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl" >
<h5 ng-click="hide($index)" ng-repeat="x in data">{{x}}<!-- HOW TO USE ng-hide HERE --></h5>
</div>
</body>
</html>
I am working with angular JS and JSP. i need to retrieve the session attribute variable from the JSP to my controller. My code is below
JSP
<html lang="en" ng-app="myApp">
<body>
<div data-ng-controller="myCtrl as vm" style="height:100%">
<md-content layout="row" style="height:100%">
<div class="widget">
<h2>Header</h2>
<div ui-view></div>
</div>
</md-content>
</div>
<script type="text/javascript" src="/root/script/script.js"></script>
<%
String policy = session.getAttribute("POLICY_CHANGE");
%>
</body>
</html>
JS
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// i want to get the JSP variable here
});
Set session value to hidden input.
<div data-ng-controller="myCtrl as vm">
<input type="hidden" id="sessionData" />
</div>
<script>
var data = '<%=request.getSession().getAttribute("POLICY_CHANGE")%>';
document.getElementById("sessionData").value = data;
</script>
and get value
app.controller('myCtrl', function($scope, $document) {
$scope.data = $document[0].getElementById("sessionData").value;
console.log($scope.data);
});
You can output the variable using expression language as a data attribute, like this:
<div data-my-variable="${myVariable}" id="myDiv"></div>
And if you are using Jquery, you can use the attr function:
var output = $("#myDiv").attr("data-my-variable");
Try (I've never tried this - just and idea... please post if it is working):
<script>
angular.module('jspVariablesService', [])
.value("valueName",${yourVariable});
</script>
in <head></head> or at the beginning of body and then import jspVariableService in
var app = angular.module('myApp', ["jspVariableService"]);
and use it in controller:
app.controller('myCtrl', ["$scope", "valueName" function($scope,valueName) {
//use your value!
});
I am trying to print scope value from 2 controllers. It is not printing the value from the second controller. What is my mistake?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-app="myApp" ng-controller="Ctrl2">
{{carname}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
You defined two ng-app, angular will bootstrap the first app it finds on the page and not the second one. Therefore second one doesn't work.
Define app on the element covering all the controller elements.
Example Snippet:
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
You don't need ng-app for each div, change your html like this:
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
Because you defined your app twice. Try to use this code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('Ctrl1', function($scope) {
$scope.carname = "Honda";
});
app.controller('Ctrl2', function($scope) {
$scope.carname = "Toyota";
});
</script>
Two ng-app on single page doesn't work, it will compile only the 1st instance of ng-app and the other will get ignored.
It seems like you wanted to use two controllers on the same page. What you can do is you can move ng-app directive on body level & have ng-controller on two different divs.
<body ng-app="myApp">
<div ng-controller="Ctrl1">
{{carname}}
</div>
<div ng-controller="Ctrl2">
{{carname}}
</div>
</body>
I am trying to load a HTML template when a link is clicked. I have made a directive that contains templateUrl which loads a HTML file. I am calling a function when a link is clicked that appends a div with our custom directive "myCustomer" to a div already in index.html. whatever i have done so far is shown below, but it doesn't work.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example12-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div id="d"></div>
</div>
</body>
</html>
script.js
(function(angular) {
'use strict';
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.showdiv = function(){
$("#d").append("<div my-Customer></div>");
};
}])
.directive('myCustomer', function() {
return {
templateUrl: 'my-customer.html'
};
});
})(window.angular);
my-customer.html
<p>DIV CONTENT</p>
Here is the link i was testing this code here
This is because the angular doesn't bind the directives if you append content like this,
you need to $compile service to do this and this will bind the directives against your $scope
so controller like,
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var compiledeHTML = $compile("<div my-Customer></div>")($scope);
$("#d").append(compiledeHTML);
};
}])
here is the DEMO
OR good to do like this,
use ng-if to create or removing element from html,
try this code
Controller,
....
$scope.anableCustomerDirective = false;
$scope.showdiv = function(){
$scope.anableCustomerDirective = true;
};
HTML
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div id="d">
<div my-Customer ng-if='anableCustomerDirective'></div>
</div>
</div>
</body>
Suggestion
if your main intention is to place a html content after the click, then you can use ng-include here and it will much cleaner and no need of a another directive.
<div id="d">
<div ng-include="templateURL"></div>
</div>
$scope.showdiv = function(){
$scope.templateURL = 'my-customer.html';
};
find the DEMO
Seems like directive is only meant to load template from it.I'd suggest you to use ng-include directive then
Markup
show
<div id="d"></div>
<div ng-include="showDiv ? 'my-customer.html': ''">
The most common way is to use $compile. More info: Dynamically add directive in AngularJS
Then your controller may look like this:
angular.module('docsTemplateUrlDirective', [])
.controller('Controller', ['$scope', '$compile', function($scope, $compile) {
$scope.showdiv = function(){
var el = $compile( "<div my-customer></div>" )( $scope );
$('#d').append( el );
};
}]);
Note that the directive invokation should look like this: <div my-customer>, not <div my-Customer></div> as you have in your code.
when you do it manually with append you actually do not run $apply or $digest so the directive is not run,
can you try to do it with ng-show or ng-if ... e.g
<body ng-app="docsTemplateUrlDirective">
<div ng-controller="Controller">
show
<div my-customer ng-if="showdiv"></div>
<div id="d"></div>
</div>
</body>
this way angular runs the $apply and the directive will be rendered.