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>
Related
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 have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>Click on this paragraph.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$ang=$scope;
$ang.count=10;
});
$(document).ready(function(){
$("p").click(function(){
console.log("The paragraph was clicked.");
$ang.count=$ang.count-1;
});
});
</script>
</body>
</html>
But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.
Don't mix angular with jQuery!
Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there
Markup
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-click="increamentCount()">Click on this paragraph.</p>
<div>
<h2>{{ count }}</h2>
</div>
<body>
Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.increamentCount = function(){
$scope.count = $scope.count + 1;
}
});
Demo Plunker
It is should be:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.click = function(){
$scope.count=$scope.count-1;
}
});
</script>
</body>
</html>
You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p ng-click="onClick()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
</div>
<script>
angular
.module('myApp', ['ng'])
.controller('myCtrl', function($scope) {
$scope.count = 10
$scope.onClick = function () {
$scope.count--
}
// this is how you can observe state
// changes outside of event handlers
$scope.$watch('count', function(newValue, oldValue) {
console.log("The paragraph was clicked.")
})
})
</script>
</body>
</html>
How can I change some variable at view by pressing button using Angular?
For example view:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
Script:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I expect when I'll press button then instead Johny will be Joe (as in parameter).
At the moment when i click on the button nothing happens
#EDIT
Ok i know where is the problem. This works fine at my main div. However it doesn't work on my second div:
I run script below by clicking other button, and this script changed my div
function show(div_id){ //div_id is `someDiv`
document.getElementById('main_place').innerHTML = document.getElementById(div_id).innerHTML;
}
But why angular script doesn't work on this div?
Please check that one.
HTML:
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')"></button>
</div>
JS:
var myApp = angular.module('myApp',[]);
myApp.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue= function(param) {
$scope.firstname = param;
}
});
I created working example with your problem:
http://jsfiddle.net/halirgb/Lvc0u55v/
add
$scope.changeValue = function(newVal) {
$scope.firstname = newVal;
}
And on html put <p>{{firstname}}<p>
Try this in controller:
$scope.changeValue = function(changeName)
{
$scope.firstname = changeName;
};
In View:
<p>{{firstname}}</p>
Here is a working example
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope){
$scope.firstname = "Johny";
$scope.changeValue = function(param) {
$scope.firstname = param;
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script> <link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="someDiv" ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname"></p>
<button type="button" ng-click="changeValue('Joe')">Click</button>
</div>
</body>
</html>
https://plnkr.co/edit/dz553Og6E83wx0LF6NHT?p=preview
Sorry about the noob question, I'm new to AngularJS.
I have a Service and 2 Controllers , one for my home page and the second for the page that I want to create dynamically.
I want to set an object from my first controller(home page) in my service, and get this object in my second controller(on a new html page that I'll call with form action) and display some attributes of this object.
How can I do that?
Thanks!
EDIT
Sample of what I need :
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
</html>
http://plnkr.co/edit/sSBnE7gllFc0F6197cUD?p=info
In that case you can use ngStorage https://github.com/gsklee/ngStorage because data in service will be destroyed after full page reload.
please see demo here http://plnkr.co/edit/8b04wZ6btGwLodRuJr7V?p=preview
JS:
var app = angular.module('app', ['ngStorage']);
app.controller('firstCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage.$default({myValue: 0 });
});
app.controller('secondCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage;
});
HTML1
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="storage.myValue = storage.myValue + 1">{{storage.myValue}}</button>
{{service.data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
HTML2
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller myValue is: {{storage.myValue}}
</div>
Page 1
</body>
</html>
var app = angular.module('app', []);
app.service('dataService', function(){
var _data = {value:0};
return {
data : _data
};
});
app.controller('firstCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
app.controller('secondCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
Inject the service into your first controller, set an object on it. Inject the same service into the second controller and viola - the object is there!