I'm wanting to set a combined maximum length of 64 for two input fields in angular, so if say that for the first field the user enters 40 characters, in the second field the maxlength becomes 24.
So far I have tried to write is like so...
js
function newCat() {
var cat = {
id: $scope.id,
name: $scope.name
};
$scope.idMax = 64 - ($scope.name)
$scope.nameMax = 64 - ($scope.id)
[irrelevant code]
return cat
};
html
<div class="form-group">
<h3>id</h3>
<input ng-maxlength="idMax" type="text" class="form-control" ng-model="id">
</div>
<div class="form-group">
<h3>Name</h3>
<input ng-maxlength="nameMax" type="text" class="form-control" ng-model="name">
</div>
This hasn't worked though.
Can anyone suggest how it would be possible to fix what i've done, or what would be a better way to go about fixing the problem?
Made some piece of code that may help you.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.name=''; $scope.id='';
var max = 10;
$scope.update = function() {
$scope.remaining = max - ($scope.name.length + $scope.id.length);
$scope.idMax = max - ($scope.name.length);
$scope.nameMax = max - ($scope.id.length);
}
$scope.update();
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h3>id</h3>
<input maxlength="{{idMax}}" type="text" ng-model="id" ng-change="update()"> Length: {{id.length}}
<h3>Name</h3>
<input maxlength="{{nameMax}}" type="text" ng-model="name" ng-change="update()"> Length: {{name.length}}
<p>Remaining: {{remaining}}</p>
</div>
Run it and see if its what you were trying to achieve.
Fiddle
Related
I've written a working absence calculator using a HTML form and a javascript function. Unfortunately I need this to update to the output in real time and I cannot figure out how to do it without firing the function multiple times.
HTML
<form id="absence-form">
<div class="input">
<div id="title">Absence Calculator</div>
<div id="firstCell">
<div id="instruct">
Enter number of employees:
</div>
<input id="employees" type="text" name="employees">
<div id="secondCell">
<div id="instruct">
Enter average salary:
</div>
</div>
<input id="salary" type="text" name="salary">
<div id="thirdCell">
<div id="instruct">
Enter absence %:
</div>
</div>
<input id="absence" type="text" name="absence">
</div>
<div id="instruct">
<div id="output">Total salary (£):
<div id="totalSalary">
</div></div>
<div id="output">Monthly absence cost (£):
<span id="monthlyAbsence">
</span></div>
<div id="output">Annual absence cost (£):
<span id="absenceCost">
</span></div>
</div>
</div>
</form>
Javascript Function
function multiply() {
var employees = document.getElementById('employees').value;
var salary = document.getElementById('salary').value;
var totalSalary = parseInt(employees) * parseInt(salary);
var result1 = document.getElementById('totalSalary');
result1.innerHTML += totalSalary;
var absence = document.getElementById('absence').value;
var absenceCost = parseInt(totalSalary) / 100 * parseInt(absence);
var result2 = document.getElementById('absenceCost');
result2.innerHTML += absenceCost;
var monthlyAbsence = parseInt(absenceCost) / 12;
var result3 = document.getElementById('monthlyAbsence');
result3.innerHTML += monthlyAbsence;
}
});
Any pointers would be greatly appreciated.
You'll need to bind your function to the change event for the input elements.
This can be done a couple of ways:
Obtrusively (not recommended) with the element's onChange attribute (JSFiddle)
Non-obtrusively (preferred) with .on('change', function() {} }) (JSFiddle)
I'm assuming from the tag that you're using jQuery but you can achieve the same thing with vanilla JS using .addEventListener('change', callback, false) (JSFiddle)
i am new to AngularJS, i try and do the code below
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function(){
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last){
if ( $last ) {
$scope.chargableDescription.push([""]);
}
}
});
Basically, what i am trying to achieve here is to insert the whole group of input when user input something on the last chargableDescription field.
<div class="chargable-group" ng-repeat="item in chargableDescription" >
<div class="col-md-3">
<label class="form-control-label" for="l2" id="chargable-label">Chargable Item</label>
</div>
<div class="col-md-9" id="chargable-header">
<textarea name="chargable[]" class="form-control dynamic chargable" placeholder="Chargable Description" ng-model="chargableDescription[$index]" ng-keypress="chargableInput($last)"> </textarea>
<br>
<input type="number" class="form-control" step="0.01" name="chargable-price-1" placeholder="Chargable Price" ng-model="chargablePrice[$index]">
<br>
<input type="number" class="form-control" name="chargable-quantity-1" placeholder="Chargable Quantity" ng-model="chargableQuantity[$index]">
<br>
<input type="number" class="form-control" step="0.01" name="chargable-total-1" placeholder="Chargable Total" readonly ng-model="chargableTotal[$index]" >
</div>
</div>
It does the trick, however, i wonder why when i do any input on the textarea, the cursor will be gone once i input a character.
How to remove this behaviour and what would be the factor that causing this behavior?
UPDATE :
SOLVED
I added ng-model-options = { updateOn : 'blur' } and it seems like it solves the issue
It works for me https://plnkr.co/IV9t4fhln5v3l81NHaPC
What's your Angular version?
(function() {
'use strict';
var app = angular.module('SomeApp', []);
app.controller('QuotationController', function($scope) {
$scope.init = function() {
$scope.chargableDescription = [""];
$scope.chargablePrice = [];
$scope.chargableQuantity = [];
$scope.chargableTotal = [];
}
$scope.chargableInput = function($last) {
if ($last) {
$scope.chargableDescription.push([""]);
}
}
$scope.init();
});
})();
I would like to create similar calculator like here. It calculates the volume of a mulch. Visitor inserts three numbers: width, length and height (thickness) and it tells how much it has to buy.
html:
<form method="post" accept-charset="UTF-8">
<div class="form_area">
<div class="form_fields">
<div class="form_field ">
<label class="form_field_label">Width (m)</label>
<input type="text" value="" name="laius" id="laius" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Length (m)</label>
<input type="text" value="" name="pikkus" id="pikkus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Thickness (cm)</label>
<input type="text" value="" name="paksus" id="paksus" rel="calc" class="form_field_textfield form_field_size_medium">
</div>
<div class="form_field ">
<label class="form_field_label">Total (m<sup>3</sup>)</label>
<input type="text" value="" readonly name="kokku" id="kokku" class="form_field_textfield form_field_size_small">
</div>
</div>
<div class="form_submit">
<input type="submit" value="Arvuta" id="calc_submit" name="commit">
</div>
</div>
</form>
javascript:
! function($) {
$(function() {
$("[rel='calc']").arvutus();
});
$.fn.arvutus = function() {
var inputs = $(this);
var kokku = $("#kokku:first");
inputs.bind("change keyup", function() {
var obj = $(this);
if (obj.val() !== "") {
parseFloat(obj.val()).toFixed(2);
};
arvuta();
});
$("#calc_submit").bind("click", function(e) {
e.preventDefault();
arvuta();
});
function arvuta() {
var width = inputs.filter("#laius").val();
width = width.toString();
width = width.replace(",", ".");
var lenght = inputs.filter("#pikkus").val();
lenght = lenght.toString();
lenght = lenght.replace(",", ".");
var thickness = inputs.filter("#paksus").val();
thickness = thickness.toString();
thickness = thickness.replace(",", ".");
thickness = thickness / 100;
var sum = width * lenght * thickness
sum = sum.toFixed(2);
kokku.val(sum + " m3 multši.");
};
};
}(window.jQuery);
I inserted html and javascript into jsfiddle, but mine doesn't work. Probably i miss something very obvious. some more javascript?
update: a little while ago, somebody provided a working code, but moderator removed it so quickly i couldn't copy it... :(
The code parseFloat(obj.val()).toFixed(2) returns a value, but you're not doing anything with it. Should it be stored somewhere so you can use it in calculating the volume?
I have a form with fields with ID like
#opdtestbill-health_card_number
#opdtestbill-test_charges
#opdtestbill-discount
#opdtestbill-total_charges
Now what I am trying to do is when the health_card_number is not empty calculate discount on test charges. That is the discount field and total_charges field is filled automatically.
The test_charges field is getting the data through ajax and is not filled manually.
I have tried this code, but I am getting NaN in both discount and total_charges.
This is my code:
<?php
$this->registerJs("$('#opdtestbill-health_card_number').blur(function(){
if( $(this).val() ) {
var test_charges = parseInt($('#opdtestbill-test_charges').val());
var discount = (test_charges*5)/100;
var totalAmount = test_charges - discount;
$('#opdtestbill-discount').val(discount);
$('#opdtestbill-total_charges').val(totalAmount);
}else{
$('#opdtestbill-discount').val()=0;
}
});");
?>
I have not much idea about using JQuery, any help will be greatly appreciated.
I have also tried to do this using only php, but it works only on update, not on new record.
The php code I am using is like
in my Model
public function getHealthCardDiscount(){
$discount=0;
if (!empty($this->health_card_number)){
$discount = ($this->test_charges *5)/100;
}
return $discount;
}
and in _form.php
$model->discount=$model->healthCardDiscount;
$model->total_charges=$model->test_charges - $model->healthCardDiscount;
Thanks.
HTML for relevant section is like this:
<div class="form-group field-opdtestbill-health_card_number">
<label class="control-label" for="opdtestbill-health_card_number">Health Crd. No.</label>
<input type="text" id="opdtestbill-health_card_number" class="form-control" name="OpdTestBill[health_card_number]" maxlength="15">
<div class="form-group field-opdtestbill-test_charges">
<label class="control-label" for="opdtestbill-test_charges">Test Charges</label>
<input type="text" id="opdtestbill-test_charges" class="form-control" name="OpdTestBill[test_charges]" maxlength="10">
<div class="form-group field-opdtestbill-discount">
<label class="control-label" for="opdtestbill-discount">Disct.</label>
<input type="text" id="opdtestbill-discount" class="form-control" name="OpdTestBill[discount]" maxlength="10">
<div class="form-group field-opdtestbill-total_charges">
<label class="control-label" for="opdtestbill-total_charges">Total Charges</label>
<input type="text" id="opdtestbill-total_charges" class="form-control" name="OpdTestBill[total_charges]" value="0" maxlength="10">
Rendered Jquery
<script type="text/javascript">jQuery(document).ready(function () {
$('#opdtestbill-health_card_number').blur(function(){
if( $(this).val() ) {
var test_charges = parseInt($('#opdtestbill-test_charges').val());
var discount = (test_charges*5)/100;
var totalAmount = test_charges - discount;
$('#opdtestbill-discount').val(discount);
$('#opdtestbill-total_charges').val(totalAmount);
}else{
$('#opdtestbill-discount').val()=0;
}
});
If you want convert string to integer, you may use like that:
var test = "10";
test = test - 0;
And you make error in this
$('#opdtestbill-discount').val()=0;
I change your js code see http://jsfiddle.net/vitalik74/upLbpnmk/
Hello everyone i have faced some problem in case of nested checkbox uses. In my problem i m stuck on to how to use IncludeAll on click checkbox. If checkbox value is true then it's give me a value of that. if IncludeAll checkbox is true then all checkbox will be selected and show the value of all in Array. and if one of the checkbox is false then IncludeAll checkbox false..But in Case the other checkbox will be selected.
This is my Fiddle Link : http://jsfiddle.net/0x4396pu/1/
Here is my Html Code:
<form action="#" ng-controller='MyCtrl'>
<div class="control-group" ng-repeat="story in stories">
<br>
<input type="checkbox" ng-model="story.selectionAll">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-checked="story.selectionAll">
{{browser}}
</label>
</div>
</div>
</div>
<pre>{{selection | json }}</pre>
</form>
Here is my Controller file :
function MyCtrl($scope) {
$scope.stories = ['1', '2', '3'];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
angular.forEach($scope.stories, function(story) {
$scope.selection[story] = {
browsers: {},
};
});
}
Thanks in Advance.
I am answer my own Question. But anyway Here is Answer how to select Checkbox in Nested ng-repeat.i think It's Help you Thanks.
Http Plunkr LInk http://plnkr.co/edit/OQxi53xtVKOgToPhzDUZ?p=preview
Here is Html Code:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4
/angular.min.js">
</script>
<script src="script.js"></script>
</head>
<body>
<form action="#" ng-controller='detailContrller'>
<div class="control-group" ng-repeat="story in stories"> <br>
<h4> Enter Data </h4>
Name : <input type="text" data-ng-model="selection[story].Name1"
placeholder="Enter Name"> <br>
Address : <input type="text" data-ng-model="selection[story].Name2"
placeholder="Enter Address"> <br>
City : <input type="text" data-ng-model="selection[story].Name3"
placeholder="Enter City"> <br>
Phone : <input type="text" data-ng-model="selection[story].Name4"
placeholder="Enter Phone "> <br>
State : <input type="text" data-ng-model="selection[story].Name5"
placeholder="Enter State"> <br>
<input type="checkbox" ng-model="selection[story].all"
ng-change="updateAll(story)">
<label class="control-label">IncludeAll {{story}}</label>
<div class="controls">
<label class="checkbox inline" ng-repeat="browser in browsers">
<input type="checkbox" value="{{browser}}"
ng-model="selection[story].browsers[browser]"
ng-change="checkChange(browser)"
> {{browser}}
</label>
</div>
</div>
<button type="button" data-ng-click="save()">Save</button>
<pre>{{selection | json}}</pre>
</form>
</body>
</html>
Here is my Controller
var app = angular.module("myApp",[]);
app.controller('detailContrller', function($scope){
$scope.stories = [];
$scope.browsers = ['IE', 'Chrome', 'Firefox','Safari','Opera'];
$scope.selection = {};
$scope.details = {};
var checked;
$scope.updateAll = function (story) {
checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
for(var i = 0; i< 3; i++) {
$scope.stories.push(i+1);
}
$scope.checkChange = function (browser) {
for(var i =0; i< $scope.stories.length; i++){
if(!$scope.stories[i].selected){
checked = false
return false;
}
}
}
angular.forEach($scope.stories, function(storgy) {
$scope.selection[storgy] = {
browsers: {}
};
});
$scope.save = function () {
console.log($scope.selection);
}
})
Your "include all" checkbox is trying to set .selectionAll property on a String (story in stories gives you a String).
You can't use ng-checked to somehow "work together" with ng-model. If you want your "include all" checkbox to select all subordinate checkboxes and vice versa, you'll need to watch the changes and provide some logic connecting the two things in your controller.
For example, if you want change of the "include all" checkbox value to influence other checkboxes, you'd have to do something like
<input type="checkbox" ng-model="selection[story].all" ng-change="updateAll(story)">
and in your controller
$scope.updateAll = function (story) {
var checked = $scope.selection[story].all;
$scope.browsers.forEach(function (browser) {
$scope.selection[story].browsers[browser] = checked;
});
};
and handle changes of the individual checkboxes in a similar fashion.