getting started with directive-
31 views
Skip to first unread message
Deep Singhal
Dec 28, 2015, 12:26:11 AM12/28/15
to AngularJS
I am new to Angular and in learning phase. I am not sure if this is the appropriate forum to ask questions, but here it goes. I am having a comment box and am trying to display the count of char that I typed in it. The following code does not give me the count but the one commented does so
==================JS=============
var myApp=angular.module("myApp",[]);
myApp.controller("myController",["$scope",function($scope){
$scope.commentText="";
/* $scope.lenghtComment=function(){
return $scope.commentText.length;
};*/
$scope.lengthComment=$scope.commentText.length;
}]);
=========================================
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8"/>
<title>Practice</title>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
Enter your text <br>
<textarea rows="5" id="comments" ng-model="commentText"></textarea>
<br>
Type Char:{{ lenghtComment }} <!-- Type Char:{{ lenghtComment() }} -->
</div>
<script src="https://code.angularjs.org/1.5.0-beta.2/angular.min.js" type="text/javascript"></script>
<script src="prac.js" type="text/javascript"></script>
</body>
</html>
Sander Elias
Dec 28, 2015, 12:44:52 AM12/28/15
to AngularJS
Hi Deep,
Your controller code is only executed once. And that is during init. So you are setting $scope.lengthComment to 0. Because just above you are setting $scope.commentText="".
If this is still unclear to you, just ask, and I will explain along.
As you are starting, I would advise you to read through the styleguide at least twice. Even the parts you don't understand (yet)
Regards
Sander
Deep Singhal
Dec 28, 2015, 1:18:35 AM12/28/15
to ang...@googlegroups.com
Thanks Sander for styleguide. I will definitely go through this. Regarding the above issue, what I was thinking is that since I am changing the text in CommentText, digest loop finds that scope variable has changed and re-renders it and this change should also affect lengthComment variable (resulting in one more loop )and should display the exact count. If not case how is the function lengthComment() behaving differently than variable lengthComment.
Please clarify my understanding. Thanking you in advance,
--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/Nx-MoBYOYA0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Sander Elias
Dec 28, 2015, 4:06:09 AM12/28/15
to AngularJS
Hi Deep,
It would not make sense if on every log, a would increment right?
A variable is set, a function is evaluated. If you user the function it actually 'runs' that function on the current set of values, and so returning an updated value.
Example:
var a= 1;
a = a +1
function log() {
console.log('a',a);
}
function inc() {
a = a + 1;
}
log(); --> a, 2
log(); --> a, 2
log(); --> a, 2
inc()
log(); --> a, 3
log(); --> a, 3
log(); --> a, 3
It would not make sense if on every log, a would increment right?
Regards
Sander
Ankush Joshi
Dec 29, 2015, 1:25:51 AM12/29/15
to AngularJS
Hi Deep,
This might will help you ...
<html ng-app="myNoteApp">
<head>
<title>My Notepad with Char limit</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("myNoteApp", []);
app.controller ("notectrl",function ($scope)
{
//Basic variables declaration
$scope.Text ="";
$scope.limit = 10;
//Function 1
$scope.charactersLeft = function (){
////Testing Char limits in charactersLeft Function 1
if ($scope.Text.length > $scope.limit)
{
window.alert("Warning !")
}
else
if ($scope.Text.length == $scope.limit){
$scope.Notallow = function (){
////Testing with new NotAllow function in elseif in charactersLeft Function 1
window.alert("Your text limit has reached");
}//NotAllow function :end
}
else{
return $scope.limit - $scope.Text.length;
};//Default else :end
};//Function 1 :end
//Function 2
$scope.clearAllbtn = function (){
return $scope.Text ="";
};//Function 2 :end
});
</script>
</head>
<body>
<div ng-controller="notectrl">
<p>
<textarea ng-model="Text" ng-keydown="Notallow()">
</textarea>
<br><br>
<p>Characters remaining:
<span ng-bind="charactersLeft()"></span>
</p>
</p>
<input type="button" ng-click="clearAllbtn()" value="Clear"/>
</div>
</body>
</html>
Reply all
Reply to author
Forward
0 new messages