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
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>
-----index.html-------
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</html>
----main.js--------
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
templateUrl : "sample.html"
});
});
----aboutController.js---------
var app = angular.module("myApp", []);
app.controller('aboutController', function($scope,$http,$location) {
$scope.name="";
$scope.message="Home Page";
$scope.go= function(){
$http.get('content.json').success(function(data) {
$scope.obj = data;
$location.path("/go");
});
}
});
------sample.html--------
<h1>Sample Page</h1>
I am trying to use angular routing in this test application. Can you tell what am I doing wrong here? When I click on the submit button, location in the address bar changes to "http://localhost:8080/index.html#/go" but I don't see the contents of "sample.html" in ng-view.
You are declaring your module for your app twice so it is overwriting the first configuration. Remove the second declaration: var app = angular.module("myApp", []);
Heres your code working (I've remove the GET request and substituted template url with template for demonstrative purposes):
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/go", {
template: "<h1>Sample Page</h1>"
});
});
app.controller('aboutController', function($scope, $http, $location) {
$scope.name = "";
$scope.message = "Home Page";
$scope.go = function() {
$location.path("/go");
}
});
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-
route.js"></script>
<script src="main.js"></script>
<script src="aboutController.js"></script>
<div ng-app="myApp" ng-controller="aboutController">
<h1>About Page</h1>
<p>{{ message }}</p>
<button ng-click="go()">Submit</button>
<div ng-view></div>
</div>
</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 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>
Here is my code :
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="./angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
</script>
<title>Home Page</title>
</head>
<body>
<div ng-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name">
</p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script type="text/javascript">
angular.bootstrap(document, ['myApp1','myApp']);
</script>
</body>
</html>
Although i can see the expected output, but at the same time facing console error.
here is the description of error
(while i click on the url)
it says it already bootstrapped so i remove the 'myApp' from .bootstrap function, but that didnt work.
Please help.
You are doing both ng-app declarations and angular.bootstrap(document, ['myApp1','myApp']);.
You need to choose only one method, otherwise you get the well descripted error of multiple bootstrapped applications.
The problem is as explained in the previous comments, the automatic and manual initialization of modules.
Since you want to initialize them separately for each elements then try an approach like
<div data-app="myApp" ng-init="name='Sparsh'">
<div ng-controller="myCtrl">{{firstName}}</div>
<p>
Name : <input type="text" ng-model="name"/>
</p>
<h1>Hello {{name}}</h1>
</div>
<div data-app="myApp1" ng-init="names=['Jani','Hege','Kai']">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
then
var app = angular.module('myApp', []);
var app1 = angular.module('myApp1', []);
app.controller('myCtrl', function ($scope) {
$scope.firstName = "sparsh";
$scope.lastName = "khandelwal";
});
var els = document.querySelectorAll('[data-app]');
for (var i = 0; i < els.length; i++) {
angular.bootstrap(els[i], [els[i].dataset.app]);
}
Demo: Fiddle