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>
Related
I want to change the form inputs dynamically , and i have tried doing it using ng-bind-html , but only label is getting displayed , text box doesn't appears on the DOM. Here what has to be written inside ctrl.content depends upon the values from the server.
Note
type value will be coming from server , and it can be dynamic
HTML
<div ng-bind-html="ctrl.content">
Controller
function myCtrl(type) {
var ctrl = this;
switch (type) {
case 1:
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
break;
case 2:
ctrl.content = " <div> Input : <input type=\"textarea\" > </div> ";
break;
default:
}
Dom Element :
<div class="padding ng-binding ng-scope" ng-bind-html="addMeassurments.content"> <div> Input : </div> </div>
First, your assignment is all wrong
ctrl.content = " <div> Input : <input type=\"text\" > </div> ";
You should be assigning the markup to a $scope property. e.g.
$scope.content = " <div> Input : <input type=\"text\" > </div> ";
Secondly you should use the $sce service to sanitize the html. Here's a plnkr where this code demonstrates the intended behavior
var app = angular.module('plunker', []);
app.controller('Ctrl', function($scope, $sce) {
$scope.name = 'World';
var ctrl = this;
$scope.click = function myCtrl(type) {
switch (type) {
case 1:
$scope.content = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
break;
case 2:
$scope.content = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
break;
default:
}
}
});
Note also that I changed your markup from input type="textarea" to a textarea element.
You should use $sce service with ngSanitize module:
angular.module('app', ['ngSanitize'])
.controller('MyController', ['$scope', '$sce', function($scope, $sce) {
$scope.html = function(){
return $sce.trustAsHtml(`<div> Input : <input type=\"${$scope.type == 0 ? 'text' : 'textarea'}\" > </div>`);
}
}]);
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-sanitize.js"></script>
<body ng-app="app">
<div ng-controller="MyController" ng-init='type="0"'>
text: <input type="radio" ng-model="type" value="0">
textarea: <input type="radio" ng-model="type" value="1">
<div ng-bind-html="html()"></div>
</div>
</body>
A textarea can not render HTML input type like <input type=\"textarea\" >..
and try with $sce.
var app = angular.module('exApp',[]);
app.controller('ctrl', function($scope,$sce){
$scope.text = $sce.trustAsHtml("<div> Input : <input type=\"text\" > </div> ");
$scope.textArea = $sce.trustAsHtml(" <div> Input : <textarea></textarea> </div> ");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">
<div ng-bind-html="text"></div><br>
<div ng-bind-html="textArea"></div><br>
</body>
Use ng-if instead of ng-bind-html.
Something like this:
<div>
<div ng-if="type===1">Input : <input type="text"></div>
<div ng-if="type===2">Input : <input type="textarea"></div>
</div>
And in your controller, you will only need to dynamically assign type either 1 or 2 as value.
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
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>
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>
I am trying to create a multiplication function in an angularjs controller. I want the function to return the product of quantity and price. I'm using the snippet below, but it's returning an error. What am I doing wrong?
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{fullname()}}</p>
</div>
<script> function personController(scope) { var input1 = scope.quantity , var input2 = scope.price ,
$scope.fullName = function() {
return {{input1 * input2}};
} } </script>
</body> </html>
In this simple example you do not need to create a controller.
See here
<h2>Cost Calculator</h2>
Quantity:
<input type="number" ng-model="quantity">Price:
<input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
But, if you need create it - see mistakes:
angulars interpolation syntax {{ }} is only used in HTML, not javascript.
Use $scope, not scope
formatting your code is important.
Here is an example using the currency filter. You might also want to take a look at the number filter.
Note: Starting in angular 1.3.0 the currency filter lets you add a fractionSize.
angular.module('myApp',[])
.controller('personController', ['$scope', function($scope) {
$scope.price = 0;
$scope.quantity = 0;
$scope.total = function() {
return $scope.price * $scope.quantity;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in dollars:</b> {{ total() | currency : $ }}</p>
</div>
<script> function personController(scope) {
var input1 = scope.quantity;,
var input2 = scope.price;
$scope.fullName = function() {
return {{input1 * input2}};
}
}
</script>
</body> </html>
There is a clear syntax error here which is {{input * input2}}. This is angularjs expression syntax, not javascript syntax. Try just using input * input2. You are also referring to $scope which is not available, so change to 'scope':
scope.fullName = function() {
return input1 * input2;
}
Or, you could refer to the scope variables directly
scope.fullName = function() {
return scope.quantity * scope.price;
}
Or you could refer to them directly in the template:
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity * price}}</p>
</div>
</body> </html>
you are not using $scope? thats not local variable that is injected $scope so name cannot be changes as we do with the argument names of loval variables
There were syntax errors as well i have refactored your code
Working demo
angular.module('test',[]).controller('personController', function ($scope) {
$scope.price = 0;
$scope.quantity=0
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html> <html>
<head> <script src= "Angular.js"></script> </head>
<body>
<div ng-app="test" ng-controller="personController">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity"> Price: <input type="number" ng-model="price">
<p><b>Total in dollar:</b> {{quantity*price}}</p>
</div>
</body> </html>