ng-change increment and decrement value in ng-repeat loop - javascript

I have a code like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer <input type="checkbox" ng-model="isTrue" ng-change="count=count+1" />
Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = true;
}]);
</script>
</body>
</html>
In this code when check the checkbox the count will be incremented. Here how to i check if checkbox is ticked, then only incremented, otherwise if untick, it will decremented. Please anyone help.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well">
Are you developer
<input type="checkbox" ng-model="isTrue" ng-change="isTrue ? (count=count+1) :(count=count-1) " />Count: {{count}}
<pre>{{isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope',
function($scope) {
$scope.isTrue = false;
}
]);
</script>
</body>
</html>
try changing ng-change .

This will work for you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<div ng-controller="ExampleController">
<div class="container">
<div class="col-md-3 well" ng-repeat="Option in OptionList">
Are you {{Option.choice}} <input type="checkbox" ng-model="Option.value" ng-change="UpdateCount(Option)" />
Count: {{Option.count}}
<pre>{{Option.isTrue}}</pre>
</div>
</div>
</div>
<script>
var app = angular.module("changeExample", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.isTrue = false;
$scope.count = 0;
$scope.OptionList = [{
choice: "Developer",
value: false,
count: 0
},{
choice: "Tester",
value: false,
count: 0
},{
choice: "Lead",
value: false,
count: 0
},{
choice: "Architect",
value: false,
count: 0
}
];
$scope.UpdateCount = function(Option){
if(Option.value){
Option.count = Option.count + 1;
}
else {
Option.count = Option.count - 1;
}
}
}]);
</script>
</body>
</html>

Related

AngularJS binding variables

Yo everyone.
Today im learning something about AngularJS.
In my project i tried to use controller as syntax.
app.js
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
console.log('New', newValue, 'Old:', oldValue);
});
}]);
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
<p>This is the parent: {{parent.message}}</p>
<p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
<p>This is the parent: {{parent.message}}</p>
<p>This is the secondChild:{{second.message}}</p>
<p>Randomize:{{second.value}}</p>
</div>
</div>
</body>
</html>
When i try to load the page this is my output:
This is the parent: {{parent.message}}
This is the parent: {{parent.message}}
This is the first child: {{first.message}}
This is the parent: {{parent.message}}
This is the secondChild:{{second.message}}
Randomize:{{second.value}}
How i can fix this?
you are missing ng-app
<body ng-app="myApp">
DEMO
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('ParentController', [function(){
this.message = 'Hello from the parent.';
}]);
angular.module('myApp').controller('FirstChild', [function(){
this.message = 'Hello from the first child.';
}]);
angular.module('myApp').controller('SecondChild', ['$interval','$scope',function($interval, $scope){
this.message = 'Hello from the second child';
this.value = 1;
$interval(function() {
this.value = Math.round(Math.random()*1000000)+1;
}.bind(this),2000);
$scope.$watch('second.value', function(newValue, oldValue){
console.log('New', newValue, 'Old:', oldValue);
});
}]);
<!DOCTYPE html>
<html>
<head>
<title>Controllers as syntax</title>
<meta charset="ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ParentController as parent">
<p>This is the parent: {{parent.message}}</p>
<div ng-controller="FirstChild as first">
<p>This is the parent: {{parent.message}}</p>
<p>This is the first child: {{first.message}}</p>
</div>
<div ng-controller="SecondChild as second">
<p>This is the parent: {{parent.message}}</p>
<p>This is the secondChild:{{second.message}}</p>
<p>Randomize:{{second.value}}</p>
</div>
</div>
</body>
</html>

Insert new html element into every ng-repeat (AngularJS)

I'm having some trouble figuring out a way to insert a <p> in the DOM in each item of ng-repeat.
I'm doing ng-repeat of this array of objects:
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
then in the html file I have:
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
{{insertHTML(item.paragraph)}}
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
the insert.HTML(str) function is supposed to transform the string on each item.paragraph into an html element.
Here's the function:
$scope.insertHTML = function(str) {
var wrapper = document.createElement('div');
wrapper.innerHTML = str;
};
I created this plunker where you can check the whole code running
Try Directives. See demo here
var app = angular.module('plunker', []);
app.directive('myDir',function(){
return{
link : function(scope,element){
element.append(' <br><br><p>this is the beginning of box</p>');
element.append('<p>'+scope.item.name+'</p>');
element.append(' <p>this is the end of box<br><br><br></p>');
}}
})
app.controller('MainCtrl', function($scope) {
$scope.items = [
{name: "john", paragraph:"<p>hi, im john</p>"},
{name: "rita", paragraph:"<p>hi, im rita</p>"},
{name: "joe", paragraph:"<p>hi, im joe</p>"}
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="item in items">
<my-dir></my-dir>
</div>
</body>
</html>
You should use Angular's built in ng-bind-html and ngSanitize:
angular.module("demo", ["ngSanitize"]);
angular
.module("demo")
.controller("demoController", ["$scope", "$sce", function($scope, $sce) {
$scope.items = [{
name: "john",
paragraph: $sce.trustAsHtml('<iframe border="0" frameborder="0" allowtransparency="true" width="603" height="465" src="//www.chess.com/emboard?id=3681802"></iframe>')
},
{
name: "rita",
paragraph: "<p>hi, im rita</p>"
},
{
name: "joe",
paragraph: "<p>hi, im joe</p>"
}
];
}])
.red {
background-color: red
}
.blue {
background-color: blue
}
.green {
background-color: green
}
<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="demoController">
<p>hello everyone</p>
<div ng-repeat="item in items">
<br>
<br>
<p>this is the beginning of {{$index}} box</p>
<p>{{item.name}}</p>
<div ng-bind-html="item.paragraph"></div>
<p>this is the end of {{$index}} box</p>
<br>
<br>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-sanitize.js"></script>
</body>
</html>

AngularJS: divide parent <div> every n element

I have a javascript array like this, and trying to generate nested <div> with AngularJS.
var arr = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
I would like to divide with every 3 elements like this.
<div class="parent">
<div class="child">abc</div>
<div class="child">def</div>
<div class="child">ghi</div>
</div>
<div class="parent">
<div class="child">jkl</div>
<div class="child">mno</div>
<div class="child">pqr</div>
</div>
<div class="parent">
<div class="child">stu</div>
</div>
Can I do this?
One way is create a dummy array based on itemsArray.length/maxItems and use that dummy array for an outer ng-repeat...then use limitTo filter for items.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.maxItems = 3;
$scope.items = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
$scope.parentArr = new Array(Math.ceil($scope.items.length/$scope.maxItems));
});
.parent{border: 1px solid #ccc; padding:10px}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div class="parent" ng-repeat="par in parentArr track by $index">
<div ng-repeat="item in items |limitTo: maxItems : $index*maxItems">{{item}}</div>
</div>
</div>
Here is the complete code to achieve it in angularJs using ng-repeat
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="parent" ng-repeat="item in chunkArray">
<div class="child" ng-repeat="child in item">{{child}}</div>
</div>
</div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller('myCtrl', function($scope) {
var data = ["abc", "def", "ghi", "jkl", "mno", "pqr", "stu"];
$scope.chunkArray = chunk(data,3);
function chunk(array, size) {
var result = []
for (var i=0;i<array.length;i+=size)
result.push( array.slice(i,i+size) )
return result;
}
});
</script>
</body>
</html>

Need Two views on a single page with separate modules in angular js

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Azhar";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Khan";
});
</script>
</head>
<body>
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="myApp1" ng-controller="MyControllerA">
<h1>My Name</h1>
<div >
<span>{{name}}</span>
</div>
</div>
<div id="App2" ng-app="myApp2" ng-controller="MyControllerB">
<h1>My Surname</h1>
<div >
<p>{{name}}</p>
</div>
</div>
<script>
angular.module("myApp1", [])
.controller("MyControllerA",
function($scope) {
$scope.name="sagar";
}
);
angular.module("myApp2", [])
.controller("MyControllerB",
function($scope) {
$scope.name = "chopada";
}
);
angular.bootstrap(document.getElementById("App2"),['myApp2']);
</script>
</body>
</html>
Hope It Will Help You...
You need to manually bootstrap the Angular apps as below. Check out the link: https://plnkr.co/edit/iW8GzBgexjylXiq1IWtp?p=preview
<div id="AgeCalc">
<h1>Age Calculator</h1>
<div ng-app="MyModuleA" ng-controller="MyControllerA">
{{name}}
</div>
</div>
<div id="Currency Converter">
<h1>Currncy Converter</h1>
<div ng-app="MyModuleB" ng-controller="MyControllerB">
{{name}}
</div>
</div>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) { $scope.name = "Azhar"; });
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) { $scope.name = "Khan";});
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyModuleA','MyModuleB']);
});

The controller function is not being called

i'm learning AngularJs and i complete some courses in internet i know what is module, controller, service, i know some basics directives, and i found in internet a basic AngularJs video tutorial, i'm doing all like in this video but can't understand why it's not work.
Here is my code
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl">
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
It should insert new text in my array, but when i'm clikcking on the button nothing happens, and no error in console, i realy can't understand why?
The ng-click event is out of the controller's scope. The quick answer is to move ng-controller="todoCtrl" to an enclosing/outer element, which is body in this case.
Move the ng-controller attribute to the <body> - so that it incorporates the form and the ng-click event. For example:
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="todoApp">
<body ng-controller="todoCtrl">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
</body>
</html>
The model and functions should be in scope to be used, so you need to have addTodo function called within todoCtrl scope. Just add a wrapper and have the controller there.
var app = angular.module('todoApp', []);
app.controller('todoCtrl', ['$scope', function($scope) {
$scope.todos = [
{
text: "Learn AngularJs"
},
{
text: "Build App"
}
];
$scope.addTodo = function() {
$scope.todos.push({text: $scope.todoText});
};
}]);
<html ng-app="todoApp">
<head>
<title>todo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="/underscore-master/underscore-min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div ng-controller="todoCtrl" class="wrapper">
<div>
<h2>Total todos: {{todos.length}}</h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<span>{{todo.text}}</span>
</li>
</ul>
</div>
<form class="form-horizontal">
<input type="text" ng-model="todoText">
<button class="btn" ng-click="addTodo()"><i class="icon-plus">Add</i></button>
</form>
<div>
</body>
</html>

Categories