Adding a comma after every input HTML/JS - javascript

I've seen quite a few listings related to this question but none of them seem to work or don't exactly fit my requirements.
I have an HTML document with an input type="text".
I am trying to accept numbers from the user and after every input, a comma will appear.
Ex.
User Enters 1234 -> Display 1,2,3,4
I would like the values to be saved to an array on the back side so same example
array[0] = 1
array[1] = 2
array[2] = 3
array[3] = 4
My HTML FILE Looks like this
<div class="input-group mb-3">
<input type="text" ng-keyup="format(this)">
</div>
The top DIV CLASS utilizes a ng-controller
<div class="modal-body" ng-controller="SplitCtrl">
I am just curiously how I can call that controller to create a function that will separate my inputs.

I would do something like this:
<div ng-controller="SplitCtrl">
<div class="input-group mb-3">
<input type="text" ng-model="text" ng-keyup="format($event)">
</div>
</div>
var app = angular.module('myApp', []);
app.controller('SplitCtrl',['$scope' ,function ($scope) {
$scope.format = function(e) {
if ($scope.text.length > 1) {
var text = $scope.text.split('').filter(function(_, i) {
return (i % 2) === 0;//filter out previous commas
}).join('') + e.key;
$scope.text = text.split('').join(',');
}
}
}])

As long as you don't need numbers with multiple characters (like 10) this should work.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//code.angularjs.org/1.8.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
<script>
angular.module('myApp', [])
.controller('AppController', ['$scope', function($scope) {
$scope.change = function() {
$scope.numbers = $scope.numbers.replace(/,/g, '').split('').join(',');
};
}]);
</script>
<div ng-controller="AppController">
<input type="text" ng-model="numbers" ng-change="change()" />
</div>
</body>
</html>

Related

How to implement "all check" button on AngularJS

I'm creating a button to check all checkboxes. The problem is that my "all check" button doesn't work to check off all checkboxes when I click the button.
How can I do this?
angular.module('myapp', [])
.controller('MainController', ['$scope', function($scope) {
$scope.allcheck = function(){
angular.forEach($scope.checkboxes, function(item){
item.selected = event.target.checked;
});
};
}]);
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="myscript.js"></script>
</head>
<body>
<h1>AngularJS</h1>
<div ng-controller="MainController">
<button ng-click="allcheck()">all check</button>
<input type="checkbox">a
<input type="checkbox">b
<input type="checkbox">c
</div>
</body>
</html>
When you start with Angular you should think and do in angular.
First you define your model:
$scope.selected = [false, false, false];
Then you render your model into view, using repeat. (I don't remember the syntax)
<div ng-repeat="item in selected">
<input type="checkbox" ng-model="item" />
</div>
Then you implement check all by just simply changing the model.
$scope.checkAll = function() {
for (var i = 0; i < $scope.selected.length; i++) {
$scope.selected[i] = true;
}
}
Don't think like you are working with JQuery, think like MVC.

My html5 app fail to display model

I'm using angularJS to do some custom filter work, but it failed to display model information at the first stage.
<html lang="en" data-ng-app="myApp">
<Head>
<title>Custom filter</title>
<meta charset="utf-8">
</head>
<body>
<div data-ng-init="varNum=0">
<p>
<label for="number">Enter number from 1 to 99:</label>
<input type="number" data-ng-model="varNum" id="number"/>
</p>
<p>Your number: {{ varNum }}</p>
</div>
<script src="js/angular.min.js"></script>
<script src="js/appromannumber.js"></script>
</body>
</html>
appromannumber.js
var app = angular.module("myApp", []);
app.filter("myFilter", function (){
return function(myNum) {
var formatedNumber = "";
switch(myNum) {
0:formatedNumber="zero";break;
return formatedNumber;
}
});
But if I remove the value of ng-app, like data-ng-app = "", it will start to display the varNum. I have no idea why this happen.
Should not work angular without bootstrap module means without ng-app="moduleName". I suspect that you miss something else and I mentioned bellow some problem in your code that may will help you
in your filter you missed
case in switch statement. need case 0: instead of 0:...
return formatedNumber; this statement is unreachable. should use after switch statement
you can try like:
app.filter("myFilter", function (){
return function(myNum) {
var formatedNumber = "";
switch(myNum) {
case 0:formatedNumber="zero";break;
case 1:formatedNumber="One";break;
}
return formatedNumber;
};
});
and in html:
<div data-ng-init="varNum=0">
<p>
<label for="number">Enter number from 1 to 99:</label>
<input type="number" data-ng-model="varNum" id="number"/>
</p>
<p>Your number: {{ varNum | myFilter }}</p> // shown filtered value
</div>

Angular: when using ng-include, number variable become NaN [duplicate]

This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 7 years ago.
I have a problem when i try to fragment my html with ng-include:
This is what my index.html page looks like when it works (prix=price, TVA=tax):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="style.css" />
<title> TVA </title>
</head>
<body>
<div>
<div ng-app="app" ng-controller="appCtrl">
<input ng-model="tva" placeholder="TVA" /><br />
<input ng-model="prix" placeholder="Prix" />
<select ng-model="taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
</div>
<script src="angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>
The script.js :
app = angular.module('app', []);
app.controller('appCtrl', ['$scope', function ($scope) {
$scope.calcul = function() {
if ($scope.taxe == "TTC") {
$scope.total = parseInt($scope.prix) + $scope.prix * $scope.tva /100;
} else if($scope.taxe == "HT") {
$scope.total = 1/(1+$scope.tva/100)*$scope.prix;
}
};
}]);
So this works, the result is an number (the price with or without tax).
When I use the ng-include like this:
<div>
<div ng-app="app" ng-controller="appCtrl">
<div ng-include="'tva.html'"></div>
<input ng-model="prix" placeholder="Prix" />
<select ng-model="taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
</div>
I only tried to replace the first input with a new HTML page.
The tva.html :
<input ng-model="tva" placeholder="TVA" /><br />
Now the results show "NaN" (I put those codes on a server so that I can check online). Why is this?
#Josh Beam Answered & explained ng-include creates a child scope on creating the DOM. I'd suggest you to use dot rule in angular that will follow prototypal inheritance on that object and you object value will access in child scope.
Now your object structure will changed to $scope.model={}; and this model will have all the input values. like all will become like model.prix, model.taxe & model.tva so that the prototypal inheritance will follow.
Markup
<div ng-app="app" ng-controller="appCtrl">
<div ng-include="'tva.html'"></div>
<br />
<input ng-model="model.prix" placeholder="Prix" />
<select ng-model="model.taxe">
<option>HT</option>
<option>TTC</option>
</select>
<button id="btn" ng-click="calcul()">Calculer</button>
<p>{{ total }}</p>
</div>
Code
app.controller('appCtrl', ['$scope', function ($scope) {
$scope.model = {};
$scope.calcul = function() {
if ($scope.model.taxe == "TTC") {
$scope.total = parseInt($scope.model.prix) + $scope.model.prix * $scope.model.tva /100;
} else if($scope.model.taxe == "HT") {
$scope.total = 1/(1+$scope.model.tva/100)*$scope.model.prix;
}
};
}]);
tva.html
<input ng-model="model.tva" placeholder="TVA" /><br />
Demo Plunkr
Short answer: don't use ng-include in this instance.
Long answer: ng-include creates a new child scope, so ng-model inside the ng-include isn't appCtrl's TVA. I don't see a reason here to use ng-include anyway, your code is fine without it.
So basically you're getting NaN (not a number) because $scope.TVA is never set when using the ng-include... you're attempting to multiply an undefined variable by another number, which returns NaN:
The reason for that is the ng-include creates a new scope under the scope when the HTML was included, but you can access to the parent scope by specifying $parent
<input ng-model="$parent.tva" placeholder="TVA" /><br />
A better approach is give an alias to your controller, so it will be clear semantically to children controllers accessing to a specific parent.
<div ng-app="app" ng-controller="appCtrl as vmMain">
<div ng-include="'tva.html'"></div>
... and in the other file:
<input ng-model="vmMain.tva" placeholder="TVA" /><br />

What's the Angular way to update the scope?

I have a simple two-way binding setup with angular, and I added a plain javascript function that updates the value based off of the "alt" tag of an image a user clicks on. The problem is that when I hit save, the data doesn't update until I click inside the textbox and add a space. What's the best way to get around this?
http://plnkr.co/edit/j6tPYYUqvRyvfs32mcrW?p=preview
angular.module('copyExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.master = {};
$scope.update = function(user) {
// Example with 1 argument
$scope.master = angular.copy(user);
};
$scope.reset = function() {
// Example with 2 arguments
angular.copy($scope.master, $scope.user);
};
$scope.reset();
}
]);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>
<body ng-app="copyExample">
<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name:
<input type="text" ng-model="user.name" id="name" />
<br />
<img src="http://placehold.it/100&text=John" onclick="changeText(alt)" alt="John" />
<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>
<script>
function changeText(value) {
document.getElementById('name').value = value
}
</script>
</body>
</html>
working fiddle - http://jsfiddle.net/lwalden/b2p7pu7g/
If you are already using Angular then don't write a plain vanilla javascript function for the image click event - use Angular.
Also it's recommended not to use the alt attribute in this way. You could use a data- attribute instead.
Additional attributes within a tag to pass values to a function

Trying to Show Length Value of listArray

I'm learning how to develop with AngularJS for the first time for a class and I am trying to understand why I'm not getting an updated value of the length property and was hoping someone could help me understand why my code is not working and what I should be doing for it to update.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Grocery List</title>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app>
<h1>My Grocery List</h1>
<div ng-controller="MYController">
<input type="text" ng-model="listItem" placeholder="Add Grocery Item" />
<input type="submit" ng-click="addItem()" value="Save" />
<h2>Items</h2>
<ul ng-show="itemArray.length">
<li ng-repeat="listItem in itemArray">
{{ listItem }}
<buton ng-click="deleteItem(listItem)">X</buton>
</li>
</ul>
</div>
</body>
</html>
Code in app.js
function MYController($scope) {
$scope.listItem;
$scope.itemArray = [];
$scope.addItem = function() {
$scope.itemArray.push($scope.listItem);
$scope.listItem = '';
}
$scope.deleteItem = function(deletedItem) {
var idx = $scope.itemArray.indexOf(deletedItem);
$scope.itemArray.splice(idx, 1);
}
}
In Angular when you make controller then it need to assign with a module
So here you will made your controller in js like below
angular.module('todoApp', [])
.controller('MYController', ['$scope', function($scope) {
$scope.listItem;
$scope.itemArray = [];
$scope.addItem = function() {
$scope.itemArray.push($scope.listItem);
$scope.listItem = '';
}
$scope.deleteItem = function(deletedItem) {
var idx = $scope.itemArray.indexOf(deletedItem);
$scope.itemArray.splice(idx, 1);
}
});
And in HTML bootstrap angular like below in body tag and use your controller
<body ng-app="todoApp">
See here for reference https://angularjs.org/#add-some-control
I think there may be some confusion between the listItem in ng-model="listItem" and ng-repeat="listItem in itemArray". Try changing the second one to a different variable name like this:
<li ng-repeat="item in itemArray">
{{ item }}
<button ng-click="deleteItem(item)">X</button>
</li>
Also, change that first line in your controller $scope.listItem; to $scope.listItem = '';.
assign module to angular app using this code:
var app = angular.module('plunker', [])
and
<html ng-app="plunker">
see plunker

Categories