AngularJS expression not working with adding controller

AngularJS expression not working with adding controller - javascript

When i added ng-controller to my index.html, the expression show up as {{name || "Hello"}} and {{ age || "my friend" }}. After i removed the ng-controller, expressions aslo cannot work.
it is the controller.js
var PersonCtrl = function($scope){
$scope.name = 'sky';
$scope.age = 18;
$scope.$watch('name', function(){
console.log($scope.name);
});
$scope.$watch('age', function(){
if($scope.age < 18){
console.error('not correct');
}
});
};
it is the index.html
<!DOCTYPE html>
<!-- whole page is applied in AngularJS -->
<html ng-app>
<head>
<meta charset="utf-8">
<title>Learning of AngularJS</title>
<!-- link with AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<!-- <link rel="stylesheet" href="css/home.css"> -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id ="test" ng-controller="PersonCtrl">
<h1>Name:</h1>
<input size="35" style="height:50px" type="text" ng-model="name"
placeholder="Enter your message, please.">
<h1> Age: </h1>
<input size="35" style="height:50px" type="text" ng-model="age"
placeholder="Enter your name, please.">
<hr>
<h1>{{name || "Hello"}}</h1>
<h1>{{ age || "my friend" }}!</h1>
</div>
</body>
</html>

Change your html tag to
<html ng-app="myApp">
controller.js :
// Define the Module. Only once in your code.
var myApp = angular.module('myApp', []);
// Define a controller for you module.
myApp.controller('PersonCtrl', ['$scope', function ($scope) {
$scope.name = 'sky';
$scope.age = 18;
$scope.$watch('name', function () {
console.log($scope.name);
});
$scope.$watch('age', function () {
if ($scope.age < 18) {
console.error('not correct');
}
});
}]);

Related

Cant add second ng-controller

I am pretty new in angular/js development so now i stacked with this.
When I add ng-controller="HeaderController" to my HTML code it cant load Angular. If you remove this everything is fine. Why that happened? Thanks for any help and sorry for bad English :)
Code:
(function() {
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController'['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
})();
<!DOCTYPE html>
<html ng-app ="FunStuff">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>LEARN JS</title>
<meta charset="utf-8">
</head>
<body >
<header ng-class = "ColorClass" ng-controller="HeaderController">
<h1>$~/Path_To_Js/</h1>
<button class="changeColorBtn" ng-click="changeColorClass('white')">
ChangeColorButton
</button>
</header>
<div class="wrapper" >
<article ng-controller = "TextController">
<p>There will be some information</p>
<form ng-submit="add()">
<input ng-model="name"><button>Add</button>
</form>
<ul class="buttons" ng-repeat= "n in stuff track by $index">
<li>{{n}}</li>
</ul>
</article>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

As your error says, You are missing , after the header controller,
app.controller ('HeaderController',['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
DEMO
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController',['$scope',function($scope){
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
<!DOCTYPE html>
<html ng-app ="FunStuff">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>LEARN JS</title>
<meta charset="utf-8">
</head>
<body >
<header ng-class = "ColorClass" ng-controller="HeaderController">
<h1>$~/Path_To_Js/</h1>
<button class="changeColorBtn" ng-click="changeColorClass('white')">
ChangeColorButton
</button>
</header>
<div class="wrapper" >
<article ng-controller = "TextController">
<p>There will be some information</p>
<form ng-submit="add()">
<input ng-model="name"><button>Add</button>
</form>
<ul class="buttons" ng-repeat= "n in stuff track by $index">
<li>{{n}}</li>
</ul>
</article>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

(function() {
var app = angular.module ('FunStuff',[]);
app.controller ('TextController',['$scope',function($scope){
$scope.stuff = [];
$scope.add = function(){
$scope.stuff.push ($scope.name);
}
}]);
app.controller ('HeaderController',['$scope',function($scope){
//^^ missing comma here
$scope.textClass = '';
$scope.changeClrClss = function(name){
$scope.ClrClss = name;
}
}]);
})();

How to bind children value to model angularjs

In the below code data is not binding between label value to input model..
if we click on div it will shows the value of children label in input model, where i tried to change label name, but two way binding is not happening between them..
DEMO
// Code goes here
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
$scope.selectedEvent.innerHTML = $scope.textVal;
angular.element(element.currentTarget).innerHTML = $scope.textVal;
};
});
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>
</html>

Updated HTML...
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label>User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
Update JS
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).children('label').html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
// angular.elhement(element.currentTarget).innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});

Updated code here...
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.selectedEvent = {};
$scope.setText = function (element) {
$scope.selectedEvent = element;
$scope.textVal = angular.element(element.currentTarget).html();
};
$scope.changeLabelText = function () {
// $scope.selectedEvent.innerHTML = $scope.textVal;
//angular.element($scope.selectedEvent.currentTarget).html($scope.textVal);
// $scope.selectedEvent.currentTarget.innerHTML = $scope.textVal;
angular.element($scope.selectedEvent.currentTarget).children('label').html($scope.textVal)
};
});
HTML Updated...
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText($event)">//change user name here//
<div ng-click="setText($event)">
<label >User Name</label><br/>
<input type="text" placeholder="enter username">
</div>
</body>

Use the angular ng-model
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'click on User Name';
$scope.setText = function (element) {
$scope.textVal = 'click on User Name';
$scope.changedVal = '';
};
$scope.changeLabelText = function () {
$scope.changedVal = $scope.textVal;
};
});
html
<!DOCTYPE html>
<html ng-app='myapp'>
<head>
<script data-require="jquery#*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change user name here//
<div ng-click="setText()">
<label>User Name</label><br/>
<input type="text" placeholder="enter username" value="{{changedVal}}">
</div>
</body>
</html>
If you want to update the label
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
$scope.textVal = 'User Name';
$scope.setText = function (element) {
$scope.textVal = 'User Name';
};
});
html
<body ng-controller="MainCtrl">
<input type="text" ng-model="textVal" ng-change="changeLabelText()">//change label here//
<div ng-click="setText()">
<i>Click here to reset</i><br/>
<label>{{textVal}}</label><br/>
<input type="text" placeholder="enter {{textVal}}" value="">
</div>
</body>

Angularjs: count variable of a scope passed as a param of function is not updated

I am refactoring some code and have a small issue. I am passing a count variable of the scope to a func and incrementing it but the original value is not updated. Here is a sample:
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
plunker: http://plnkr.co/edit/f6fle98TSmINuD6CCz3Q?p=preview
You can see the output in the console.
Can You offer me some solution?

My code
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var vm = this;
vm.counter = 0;
vm.change = function(counter) {
vm.counter++;
console.log(counter);
};
}]);
</script>
<div ng-controller="ExampleController as e">
{{e.counter}}
<input type="checkbox" ng-model="confirmed" ng-change="e.change(e.counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>

Please instead of counter++ inside the change-function use $scope.counter++. The answer to your question why original value is not updated is that you are not updating the scope ($scope.counter) in your current code.

I think your problem is that you are mixing variables because its name. Maybe changing counter variable name can help you:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(variable) {
variable++;
console.log(variable);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
The right way is update $scope.counter value:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-ngChange-directive-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
</head>
<body ng-app="changeExample">
<script>
angular.module('changeExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.counter = 0;
$scope.change = function(counter) {
$scope.counter++;
console.log(counter);
console.log($scope.counter);
};
}]);
</script>
<div ng-controller="ExampleController">
<input type="checkbox" ng-model="confirmed" ng-change="change(counter)" id="ng-change-example1" />
<label for="ng-change-example2">Confirmed</label><br />
</div>
</body>
</html>
I hope this help!

Angularjs ng-repeat, ng-form and validation error

A simplified version of the code:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.addressForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>
which looks in the browser like this:
When I click "REMOVE" and then "NEXT" - javascript error is produced:
Error: $scope.addressMainForm.addressForm is undefined
Why is it undefined if there is clearly still one element remaining in the array? Everything otherwise works fine (console.log output), until all the elements are removed but the last one and "NEXT" is clicked.

When you call $scope.addressMainForm.addressForm.$valid , you are attempting to call check to see if the adressForm element is valid, but your remove function has removed the addresses entry associated with that element. So the form indeed still exists, but that call becomes illegal.
Try this:
<!DOCTYPE html>
<html ng-app="main">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
<script>
var app = angular.module("main", []);
app.controller("TestController", function($scope) {
$scope.addresses = [{street: ""}, {street: ""}];
$scope.next = function() {
if ($scope.addressMainForm.$valid) {
console.log("valid");
} else {
console.log("invalid");
}
$scope.addresses.push({street: ""});
};
$scope.remove = function(index) {
$scope.addresses.splice(index, 1);
};
});
</script>
</head>
<body>
<div ng-controller="TestController" style="width: 500px;">
<form name="addressMainForm">
<div ng-repeat="address in addresses">
<ng-form name="addressForm">
<input ng-model="address.street" required name="street" type="text" placeholder="street" />
<button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
</ng-form>
<br>
</div>
</form>
<br>
<button ng-click="next()">NEXT</button>
</div>
</body>
</html>

Pass hidden values to JSON using AngularJS

Im basic developer , just wanted to pass hidden values from my html page in a json array . Following is my code :-
Index.html
<!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 src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" novalidate>
<b> Text: </b>
<input ng-model="form.text" required /><br>
<button ng-click="submitForm()" bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</body>
</html>
app.js
var app = angular.module('myApp');
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
Now , the value from ng-model="form.text" successfully returns the result as for unhidden input types
{ "text":"What_ever_text" }
but how to send a defined value in array, consisting of hidden input type like :-
<input value="99999" type="hidden" ng-model="form.userid" required />
So , wanted desired output like :-
{ "text":"What_ever_text" , "userid":"99999" }
any solution ?
Note :- The input type should be hidden or any other easier method appreciated. Thanks in advance.

hidden input fields also works same as normal fields only.
see the below code
var app = angular.module('myApp', []);
app.controller('WorkingCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.form = {
text: "some test",
userid: '12312312312'
};
$scope.submitForm = function () {
$scope.showValues = JSON.stringify($scope.form);
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="WorkingCtrl">
<h1 ng-bind="vm.heading"></h1>
<form name="myForm" ng-submit="submitForm()" novalidate>Text:
<input ng-model="form.text" required />
<br/>
<input type="hidden" ng-model="form.userid" required />
<button bng-disabled="myForm.$invalid">Click Me!</button>
</form>
<p ng-bind="showValues"></p>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

AngularJS expression not working with adding controller - javascript

Related

Cant add second ng-controller

How to bind children value to model angularjs

Angularjs: count variable of a scope passed as a param of function is not updated

Angularjs ng-repeat, ng-form and validation error

Pass hidden values to JSON using AngularJS

Categories

Resources