I wrote this code for add and remove Textboxes using AngularJS, but I want to add the value of checkbox which will written by user and display it on same page so what can I do it?
The code below will display 1 textbox and 3 buttons, if I click on append then it will add one more text box on page and when I click on remove then it will remove last checkbox.
And I want to add functionality for example if I append 4 checkboxes, and every checkbox I insert some values as number, then I click on add button then it will return the addition of values which I inserted before and return it on same page. so what should i write in code
var app = angular.module('abc', []);
app.controller('myCtrl', function($scope) {
$scope.array=[1];
});
<html ng-app="abc" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-repeat="a in array">
Textbox {{a}} <input type="text" id="{{a}}">
</div>
<button ng-click="array.push(array.length+1)">Append</button>
<button ng-click="array.pop(array.length-1)">Remove</button>
<button>Add</button>
</body>
</html>
You can create a calcSum function in the scope, which calculates the sum of the entered values and stores the sum in the scope. Then you can call that function with ng-click.
Note that I changed your array to directly contain the values entered in the textbox. This way you can directly calculate the sum of the array without having to loop through the inputs manually.
var app = angular.module('abc', []);
app.controller('myCtrl', function($scope) {
$scope.array=[0];
$scope.calcSum = function() {
$scope.sum = $scope.array.reduce(function(total, num) {
return total + num;
})
}
});
<html ng-app="abc" ng-controller="myCtrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-repeat="a in array track by $index">
Textbox {{$index}} <input type="number" ng-model="array[$index]">
</div>
<button ng-click="array.push(0)">Append</button>
<button ng-click="array.pop(array.length-1)">Remove</button>
<button ng-click="calcSum()">Add</button>
<div>{{sum}}</div>
</body>
</html>
Related
I have a var that is the result of a math calculation which changes based on the users input. I'm trying to create a get-form in html that will send the results to a new page.
my result appears on the page as var newpayment
document.querySelectorAll("#cart span.newpayment")[0].innerHTML = newpayment.toFixed(2);
However the form does not show the result..
<form id="form1" method="get">
<input type="hidden" id="submit_total1" value=""
name="submit_total1">
<button id="select1">Select</button>
</form>
<script>
var form = document.getElementById("form1");
document.getElementById("form1").action = "/complete/file.php";
document.getElementById("select1").addEventListener("click", function ()
{
var submit_total1=newpayment;
form.submit();
});
</script>
Thanks for your help but I'm still not able to get it to work. I've also tried another method by setting the value after the form is rendered (see Below). The var "newpayment" is displayed on the page as the span class but it will not populate as the value in the form. Thank you in advance for any remedies.
`
<script>
function setVal(){
document.getElementById('id').value=newpayment;
}
</script>
<p >$<span class="newpayment">0.00</span></p>`
I am a bit new to Angularjs. In Chrome, for number type input fields, pressing on up and down key arrow increases/decreases the entered value. It needs to be disabled. Any ideas or help in how it can be done?
I tried using jQuery: $(":input").bind('keyup mouseup', function () but the ng-model binding is not updating. Might be because the angular js doesn't recognize the change made with jQuery.
Model won't change inside jquery event.Use ng-keypress event in angularjs
If you need to disable it permanently better do it another way, use regular text input but restrict other chars than numbers.
<input type="text" ng-pattern="/^[0-9]*$/" />
Check out ngPattern docs
You can use ng-model directive to access the value of input in controller, and ng-disabled directive to control an input state. Hopefully the following demo may be of some help:
var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
$scope.myNumber = 0;
$scope.isDisabled = false;
$scope.toggle = function() {
$scope.isDisabled = !$scope.isDisabled;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="demo">
<div ng-controller="DemoCtrl">
<input type="number" ng-model="myNumber" ng-disabled="isDisabled"/>
<button ng-click="toggle()">Disable/Enable</button>
</div>
</div>
I'm using angular js to produce to add an array and display it as we go along. So far the given code adds an array to the list but it doesn't keep adding the array with the press of the function.
I'm quite new to angular and i think there's something I'm missing but right now I'm stuck.
The html code has a button linked which is supposed to carry out the function.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records">
<li>{{x}}</li>
</ul>
</div>
You can resolve this issue by having the items in your array be keyed by their position rather than their value. To do this, you can use track by $index. Hope this helps!
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.records = ["Testing Task 5.1", "Downloaded Task 5.1"];
$scope.addArray = function() {
$scope.records.unshift("saddfadffas")
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl" class="container">
<p>
<h3>Status: </h3>
<input type="text" ng-model="additem">
<button ng-click="addArray()">function</button>
</p>
<ul ng-repeat="x in records track by $index">
<li>{{x}}</li>
</ul>
</div>
Try push rather thanunshift? Sorry I am not at my computer right now so can't verify this, but I'm pretty sure this will solve the problem
EDIT: Perhaps your intention is
$scope.records.unshift($scope.additem)
rather than
$scope.records.unshift("saddfadffas")
but I am assuming you are perhaps running into an error we can't see from the excerpt you posted.
I'm building a really simple form with angular. I have an array of objects, like this:
data: [{id: 1, name: "Peter"},{id: 2, name: "Paul"}...]
And I need to build some checkboxes off of that data. A user can select multiple values. Then, when they hit submit, I should send an array of id numbers off to the DB, formatted like this:
{nameIds: [1,2]}
And I'm having a hell of a time building that array. I've been following other S.O. examples, but something isn't clicking. This is what I have right now:
<label ng-repeat="name in vm.nameArray">
<input type="checkbox" ng-model="name.selected"> {{name.name}}
</label>
<button ng-click="vm.submit()" class="btn btn-primary margin-10-tb">NEXT</button>
and in my controller:
vm.nameArray = response.data.data;
vm.selectedNames = [];
vm.nameIds = [];
vm.submit = function() {
vm.selectedNames = vm.nameArray.filter(function(name){
if (name.selected) return name.id;
});
vm.selectedNames.forEach(function(name){
vm.nameIds.push(name.id);
});
};
Maybe you've already guessed, but the issue here is that when a user deselects a name they've previously added, vm.nameIds does not update. The id for the deselected name persists in the array.
Any tips on how to best create this dynamic array for submission would be much appreciated.
You can first search for selected items and finally take its id property:
vm.selectedNames = vm.nameArray.filter(function(name){
return name.selected;
}).map(function(value){
return value.id;
});
The data always will be updated.
You can also further reduce the complication if you add "isChecked" property to the data. Please find plunker below:
I have added the logic to add "isChecked" property to the data as well.
Note: Please go with #SergioEscudero's answer if you want to go with your current logic.
http://plnkr.co/edit/f1Eq2OGKTuCLgI6KXn1b?p=preview
HTML:
<html>
<head>
<title>Directive Practice</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-app="myApp">
<h1>HEADER</h1>
<div ng-controller="myCtrl">
<label ng-repeat="name in nameArray">
<input type="checkbox" ng-model="name.isChecked"> {{name.name}}
</label>
<button ng-click="submitnew()" class="btn btn-primary margin-10-tb">NEXT</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
JS:
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl',function($scope) {
$scope.data = [{id: 1, name: "Peter"},{id: 2, name: "Paul"},
{id: 3, name: "John"},{id: 4, name: "David"}]
$scope.data.forEach(function(data) {
//$scope.data[key].isChecked=false;
data.isChecked=false;
})
$scope.nameArray=$scope.data;
$scope.submitnew = function() {
$scope.nameArray.forEach(function(data) {
if(data.isChecked)
console.log(data.id);
})
}
})
Here is a form with angularjs.
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="formController">
<form novalidate>
First Name:<br>
<input type="text" ng-model="user.firstName"><br>
Last Name:<br>
<input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
</div>
<script>
function formController ($scope) {
$scope.master = {firstName:"John", lastName:"Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}
</script>
</body>
I am not familiar with AngularJS, I found the expression {{user}} display as a json like format data which was binded to the textbox. I want to know is there any way to post {{user}} as json directly to the server side. I know I can easily post the form. But my purpose is the page may have a lot of textbox. I want to store it using json, just like {{user}} and submit as a combined one.
And I also want to know how to remove one value in the expression. i.e. the following code has two attribute firstName and lastName. Is there a way like remove(), after call it. I can remove one attribute in the correspond json data.
Thanks a lot
you can post your modal (user in this case) directly as JSON using $http .
In case all you text fields are saved in the user modal then u can remove one of the attributes by calling the below function before submitting the form
$scope.remove = function (user) {
delete $scope.user.firstName;//the output here is user with only lastname
}