I am not able to see character count which ng-maxlength reached.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="text" ng-model="myChar" ng-maxlength="5">
<br>
<h1>Length: {{myChar.length}}</h1>
</form>
</div>
That's because after you've exceeded maxlength, myChar's $modelValue will be undefined. You can still use the $viewValue property as shown in the below example.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.test = function() {
console.log($scope.form.myChar.$viewValue.length);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="text" name="myChar" ng-model="myChar" ng-maxlength="5" ng-keyup="test()">
<br>
<h1>Length: {{myChar.length}}</h1>
</form>
</div>
Just improving the #John Smith's answer:
You could put his verification directly on your html expression. Then you could style it with some CSS to show the user that the length is invalid:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<style>
.red {
color: red;
}
</style>
<div ng-app="plunker" ng-controller="MainCtrl">
<form name="form" novalidate>
<input type="text" name="myChar" ng-model="myChar" ng-maxlength="5">
<br>
<h1 ng-class="{'red': form.myChar.$viewValue.length > 5}">Length: {{form.myChar.$viewValue.length}}</h1>
</form>
</div>
Related
Having this js fiddle
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = $scope.value1;
$scope.value2 = "this is it: " + $scope.value1;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1"></input></br>
<input type="text" ng-model="name" ng-change="value1"></input>
</div>
</html>
I want to introduce a value in the first input and to get it into the next one as "this is it: firstvalue".
You can achieve that easily using ng-change and using ng-model properly
var app = angular.module('myApp', []);
app.controller('MyController', ['$scope', MyController]);
function MyController($scope) {
$scope.value1 = undefined;
$scope.value2 = undefined;
$scope.onValue1Change = function(){
$scope.value2 = "this is it: " + $scope.value1;
};
}
<html ng-app="myApp">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<div ng-controller='MyController'>
<h1>Introduce your value:</h1>
<input type="text" ng-model="value1" ng-change="onValue1Change()"></input></br>
<input type="text" ng-model="value2"></input>
</div>
</html>
I have this markup
how can i reset it in my corresponding component?
<form name="voiceForm" novalidate>...</form>
I have tried:
this.voiceForm.$setPristine();
self.voiceForm.reset();
but got an error voiceForm is not defined.
this is my component:
(function (app) {
app.component('voiceFormComponent', {
templateUrl: 'partials/voice-form.html',
controller: ['$scope', '$state', '$stateParams',
function ($scope, $state, $stateParams) {
var self = this;
console.log("in voice prompt component");
self.addVoice = function () {
self.voiceForm.$setPristine();
$state.go("add");
}
You can pass the form and call setPristine
var app = angular.module('formReset', []);
app.controller('MainCtrl', function() {
this.data = {
name: ''
};
this.reset = function(form) {
this.data.name = '';
form.$setPristine();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="formReset">
<head>
<title>form.$submitted</title>
<script src="http://code.angularjs.org/1.3.2/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl as ctrl">
<form name="form" novalidate>
<input name="name" ng-model="ctrl.data.name" placeholder="Name" required />
<input type="submit" />
<button type="button" class="button" ng-click="ctrl.reset(form)">Reset</button>
</form>
<pre>
Submitted: {{form.$submitted}}
</pre>
</div>
<!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">
<form name="myfrom">
<input type="text" ng-model="data.name">
<input type="text" ng-model="data.phone">
<input type="text" ng-model="data.city">
<input type="button" ng-click="reset_from()" value="reset">
</form>
{{data}}
</body>
</html>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {name:"Sahed sawon",phone:"8801714999720",city:"Dhaka"};
$scope.reset_from = function() {
$scope.data = {};
}
});
</script>
I had a similar problem when I had a form within a form (which isn't allowed) and the fix was to use ng-form for the sub-form instead. Perhaps try ng-form?
I am trying to do a simple two way binding but checking and updating the input text if it contains two word strings. For example if the input is "Comedy Movies" then
Comedy Movies ----> comedy_movies
I did this through jQuery like
var str = $('#item').val()
if (str.match(/^[a-z\.]+ [a-z]+/i)) {
str = str.replace(/\s+/g, '_').toLowerCase();
}
But not sure how to do it through angular. How can I fix this?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app>
Item:
<input type="text" ng-model="name" id="item"/>
<br />
<br />
<div>{{name}}</div>
</div>
You can bind using ng-bind of a function that contains you code - see a demo below:
angular.module('app', []).controller('ctrl', function($scope) {
$scope.name = 'Comedy Movies';
$scope.getString = function() {
var str = $scope.name;
if (str.match(/^[a-z\.]+ [a-z]+/i)) {
str = str.replace(/\s+/g, '_').toLowerCase();
}
return str;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Item:
<input type="text" ng-model="name" id="item" />
<br />
<br />
<div ng-bind="getString()"></div>
</div>
I'm new to AngJS and I'm trying to write code on my own. I got stuck in one part.
Code:
<!DOCTYPE HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> First page </title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="person.firstName"> <br>
Last Name: <input type="text" ng-model="person.lastName"> <br>
<p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
</div>
<div ng-app="mApp" ng-controller="mCtrl">
Registration number: <input type="number" ng-model="person.regNum"> <br>
Class number: <input type="text" ng-model="person.classNum"> <br>
<p> {{person.regNum, person.classNum}} </p>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.person = {firstName:"Nikhil",lastName:"Hegde"};
$scope.age = [20,21,22];
});
var app1 = angular.module('mApp',[]);
app1.controller('mCtrl',function($scope) {
$scope.person = {regNum:"122503",classNum:"12EC48"};
});
</script>
</body>
</html>
I'm not really sure what is wrong with the second pair of fields but the output as you can see is incorrect.
Also can I reuse the app variable?
app = angular.module('myApp',[]);
Instead of using a separate 'app1' variable, can I also reuse the same variable 'app' as:
app = angular.module('mApp',[]);
You should have only one app
<!DOCTYPE HTML>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title> First page </title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
First Name: <input type="text" ng-model="person.firstName"> <br>
Last Name: <input type="text" ng-model="person.lastName"> <br>
<p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
</div>
<div ng-controller="mCtrl">
Registration number: <input type="number" ng-model="person.regNum"> <br>
Class number: <input type="text" ng-model="person.classNum"> <br>
<p> {{person.regNum, person.classNum}} </p>
</div>
<script>
var app = angular.module('myApp',[])
.controller('myCtrl',function($scope) {
$scope.person = {firstName:"Nikhil",lastName:"Hegde"};
$scope.age = [20,21,22];
})
.controller('mCtrl',function($scope) {
$scope.person = {regNum:"122503",classNum:"12EC48"};
});
</script>
</body>
</html>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
First Name: <input type="text" ng-model="person.firstName"> <br>
Last Name: <input type="text" ng-model="person.lastName"> <br>
<p> {{person.firstName + " " + person.lastName}} age is: {{age[0]}}</p>
</div>
<div ng-controller="mCtrl">
Registration number: <input type="number" ng-model="person.regNum"> <br>
Class number: <input type="text" ng-model="person.classNum"> <br>
<p> {{person.regNum+ " "+ person.classNum}} </p>
</div>
</div>
Script file
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope) {
$scope.person = {'firstName':"Nikhil",'lastName':"Hegde"};
$scope.age = [20,21,22];
});
app.controller('mCtrl',function($scope) {
$scope.person1 = {'regNum':"122503",'classNum':"12EC48"};
});
define your app only once. You can add multiple controller to ng-module.
Hope It will be useful.
You can have only 1 module in an app, have different scope variable inside same controller
var app = angular.module('myApp', []);
app.controller("myCtrl", ["$scope", "$http",
function($scope, $http) {
$scope.person = {
firstName: "Nikhil",
lastName: "Hegde"
};
$scope.registration = {
regNum: "122503",
classNum: "12EC48"
};
$scope.age = [20, 21, 22];
}
]);
DEMO
Q] I'm basic Developer , How to display text from textarea on submit button using angular-js ?
I have current code with me :-
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = [];
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
}
};
}
</script>
</head>
<body>
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>
The above code just display's messages from textarea in an array format.
But i just want a single text message to be printed/displayed . How can that be achieved ? Thank you .
I guess you only want to display the current message which is in textarea. If so do this:
function Ctrl($scope) {
$scope.pass = [];
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
if ($scope.text) {
$scope.pass.push($scope.text);
$scope.list = $scope.text;
}
};
}
You can user text as value of the textarea.
When from is submitted set the value of textarea.
I guess you want the message in textarea to show in list after form submit.
<html ng-app="myApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
myApp = angular.module('myApp', []);
function Ctrl($scope) {
$scope.list = '';
// ^^^^^^^^^^^^^
$scope.pass = $scope.list;
$scope.text = 'Share your knowledge !';
$scope.submit = function() {
$scope.list = $scope.text;
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
};
}
</script>
</head>
<body>
<div>
<div ng-controller="Ctrl">
<form ng-submit="submit()">
<br>
<textarea style="resize:initial;" type="" ng-model="text" name="text"></textarea>
<br>
<input align="right" style="margin-top:20px;margin-left:120px; align:right;" type="submit" id="submit" value="Submit" />
<pre>{{list}}</pre>
</form>
</div>
</div>
</body>
</html>