I'm new to this angular JS. I have one different issue.
Please anyone help.
I have this code in html:
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt(text_comment,user_comments)">Added into textarea</button>
and Controller code is this:
$scope.add_cmnt = function(data1, data2){
$scope.user_comments = data1+data2;
console.log($scope.user_comments);
}
When i click this added into textarea button the text-comment was append into user_comments. But it's not work. I don't know why? Please anyone help.
You can directly use the model values without sending any parameters form the function.
Also covert to string before appending.
$scope.user_comments.toString() + $scope.text_comment.toString()
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.add_cmnt = function(){
$scope.text_comment = $scope.text_comment ? $scope.text_comment : ''
$scope.user_comments = $scope.user_comments ? $scope.user_comments : ''
$scope.user_comments = $scope.user_comments.toString() + ' ' + $scope.text_comment.toString()
$scope.text_comment = "";
console.log($scope.user_comments);
}
});
<!DOCTYPE html>
<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">
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt()">Added into textarea</button>
</div>
</body>
</html>
Please run this snippet
Here is the fiddle link
I see your code working when i testing. But in you make some logical mistake. You can try this for your expected output.
In html
<textarea ng-model="user_comments" md-maxlength="500" rows="5" required></textarea>
<input type="text" ng-model="text_comment">
<button ng-click="add_cmnt()">Added into textarea</button>
In Controller
$scope.add_cmnt = function(data1, data2){
$scope.user_comments = $scope.text_comment;
}
Related
in JavaScript like this :
<!DOCTYPE html>
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input field</button>
<input type="text" id="myInput">
</body>
</html>
How to use with AngularJS?
You can solve it using ng-model directive, here an example how you can implement it in your code
index.html
<div ng-controller="MainController">
<p>Clear the input field when you click on the button:</p>
<button ng-click="clearInput()">Clear input field</button>
<input type="text" id="myInput" ng-model="input">
</div>
app.js
var myApp = angular.module('myApp',[]);
myApp.controller('MainController', ['$scope', function($scope) {
$scope.input = '';
$scope.clearInput = function() {
$scope.input = '';
}
}]);
You can see the angularjs documentation for more examples.
https://docs.angularjs.org/guide/controller
i succeeded in dom javascript, with inline onclick event
<input type="text" id="hdd_data_2" value="3 TB">
<button type="button" onclick="document.getElementById('hdd_data_2').value ''">Clear</button>
I'm new to AngularJS and I am doing some tutorials to get in touch with it. While I'm doing the tutorials I have modified the code a bit to get a better feeling of what's behind. My code consists of two parts, which have nothing to do with each other.
The first one is a simple user input and based on that a list gets filtered. This is working fine.
However, in the second part I was trying to implement a simple adding function where the user can give an input and based on that the sum of two numbers is calculated. This part is not working at all. The numbers are being recognised as strings. The code is basically from this source here. When I copy the whole code and run it, it works fine, but when I modify it a bit it doesn't.
I want to understand why my code isn't working. To me there is nearly no difference. So I think that I eventually misunderstood the concept of angularjs. But I can't figure out where the error could be.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
function TodoCtrl($scope) {
$scope.total = function () {
return $scope.x + $scope.y;
};
}
</script>
</head>
<body data-ng-app>
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
Several things to change...
First you need to create a module:
var app = angular.module("myApp", []);
Then you need to define a module e.g. myApp on the ng-app directive.
<body data-ng-app="myApp">
Then you need to add TodoCtrl to the module:
app.controller("TodoCtrl", TodoCtrl);
Also check that both $scope.x and $scope.y have values, and make sure that they are both parsed as integers, otherwise you will get string concatenation ("1"+"1"="11") instead of addition (1+1=2)!
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
(function(){
var app = angular.module("myApp", []);
app.controller("TodoCtrl", TodoCtrl);
function TodoCtrl($scope) {
$scope.total = function () {
return ($scope.x && $scope.y)
? parseInt($scope.x) + parseInt($scope.y)
: 0;
};
}
}());
</script>
</head>
<body data-ng-app="myApp">
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</body>
</html>
As mentioned in the above two answers adding TodoCtrl as controller instead function will make the snippet work.
REASON:
Angularjs framework above 1.3 does not support global function which means declaring controller as function wont work.
In your code snippet, you are using angular version 1.5, which needs the controller to be defined.
DEMO
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
you need to define the TodoCtrl as controller instead function
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
Demo
angular.module("app",[])
.controller("TodoCtrl",function($scope){
$scope.x = 0;
$scope.y = 0;
$scope.total = function () {
return parseInt($scope.x) + parseInt($scope.y)
};
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" >
<input type="text" ng-model="name">{{name}}
<div data-ng-init="Names=['Arthur', 'Bob', 'Chris', 'David', 'EDGAR']">
<ul>
<li data-ng-repeat="naming in Names | filter: name ">{{naming}}</li>
</ul>
</div>
<div data-ng-controller="TodoCtrl">
<form>
<input type="text" ng-model ="x">{{x}}
<input type="text" ng-model ="y"> {{y}}
<input type="text" value="{{total()}}"/>
<p type= "text" value="{{total()}}">value</p>
</form>
</div>
</div>
Need to show error message whenever i enter space in password input field using ng-pattern.
Use of regEx - /^\S*$/ does not allow space anywhere in the string.
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern" >White Space not allowed</div>
</form>
DEMO:
var app = angular.module("app", []);
app.controller("ctrl", function($scope) {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<form name="myForm">
<input type='password' name="passInpt" ng-model='pass' data-ng-pattern="/^\S*$/">
<div data-ng-show="myForm.passInpt.$error.pattern">White Space not allowed</div>
</form>
</body>
Here is the link Jsfiddle demo
You can check for indexof or you can use regX for it.
HTML
<div ng-app="myApp">
<div ng-controller="ctrl">
<form>
<span>{{error}}</span>
<input type='password' ng-model='pass' ng-change='check()'>
</form>
</div>
</div>
**JS **
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.error = '';
$scope.check = function() {
$scope.pass.indexOf(' ') > -1 ? ($scope.error = 'Invalid') : ($scope.error = '');
}
})
Hope this will help you
updated for space
I am using the following pattern to validate email
var re = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
Copied the pattern from this fiddle. (http://jsfiddle.net/jquery4u/5rPmV/) which works wonderful.
I tried implementing the same with AngularJS like this
<input type="text" placeholder="Email" ng-model="Employer.Email" ng-pattern="emailPattern" class="form-control" name="email" required />
<p ng-show="showMessages && registerEmployerForm.email.$error.required" class="text-danger">
Email is required.
</p>
<p ng-show="showMessages && !registerEmployerForm.email.$error.required && registerEmployerForm.email.$error.pattern" class="text-danger">
Email is invalid.
</p>
JavaScript
$scope.showMessages = true;
$scope.Employer = {
"Email": ""
};
$scope.emailPattern = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/igm;
$scope.RegisterEmployer = function(myForm) {
console.log(myForm)
};
My Fiddle: http://jsfiddle.net/codeandcloud/jusoqs88/
The problem is that if I try naveen#naveennaveen.com, the first fiddle passes and the second fiddle fails. My questions
Why for the same pattern AngularJS behaves differently?
Is there something with my code?
P.S: I know input type="email" combined with registerEmployerForm.email.$error.email is the Angular way to do it. Unfortunately I cannot implement it here as the regex should not pass something like naveen#naveennaveen
Here is regexp for email validation:
var re = /^[a-z]+[a-z0-9._]+#[a-z]+\.[a-z.]{2,5}$/;
UPDATE
I can see this is not working in fiddle with 2 dots after #, but here it works : regex test online
UPDATE2
Looks like something wrong with fiddle, try this in your code, it will work:
var re = /^("")("".+?(?<!\)""#)|(([0-9a-z]((\.(?!\.))|[-!#\$%&'*\+=\?\^`\{\}\|~\w])*)(?<=[0-9a-z])#))([)([(\d{1,3}\.){3}\d{1,3}])|(([0-9a-z][-\w]*[0-9a-z]*\.)+[a-z0-9][\-a-z0-9]{0,22}[a-z0-9])$/
<link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script>
<script>
var app = angular.module('ngApp', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.tags = [
{ text: 'abdo#tatwerat.com' },
{ text: 'info#tatwerat.com' },
{ text: 'admin#tatwerat.com' }
];
});
</script>
<div ng-app="ngApp" ng-controller="MainCtrl">
<tags-input ng-model="tags" placeholder="Add Emails" allowed-tags-pattern="^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$"></tags-input>
<p>Emails : {{tags}}</p>
</div>
Hi I am getting the following error:
Error : Cannot find module with name "my".
And also
Multiple annotations found at this line:-
Cannot find module with name my. Cannot find module with name my.
Cannot find controller with name mycontroller
Please help. Thanks But I am able to run the code perfectly though the error exists.
My code is as below:
<!DOCTYPE html>
<html ng-app="my">
<head>
<script src="angular.js"></script>
<script>
var validation = angular.module('my', []);
validation.controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
</head>
<body >
<div ng-controller="mycontroller">
<form name="form1">
<label>Name :</label> <input type="text" name="name" ng-model="firstName" required>
<span style="color: red" ng-show="form1.name.$error.required"> please provide the name</span>
<br>
<br>
<label>Email: </label> <input type="email"
name="email" ng-model="email">
<span style="color: red" ng-show="form1.email.$error.email"> please provide the valid email address </span>
<p style= "color: red" ng-show="form1.email.$error.email">please provide the valid email address</p>
<label>age :</label>
<input type="text" name="age" ng-model="age" ng-pattern="pattern">
<span style="color: red" ng-show="form1.age.$error.pattern"> please provide the correct age
</span>
</form>
</div>
</body>
</html> -->`
Try changing how your instantiating your controller. Try this:
<script>
var validation = angular.module('my', []);
angular.module('my').controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
Alternatively you could also instantiate it like this:
<script>
var validation = angular.module('my', []).controller('mycontroller' , function($scope) {
$scope.firstName = "madhuri";
$scope.email = "madhuri#gmail.com";
$scope.age = "24";
$scope.pattern = /^\d*$/;
});
</script>
I have also added a JSFIDDLE that works both ways to show that they work
jsFiddle