We Keep Coding

How to remove a certain value if another value cleared? | AngularJs

I have a form where user select items and set quantity and and the price auto calculated with ng-value= quantity*price. My problem is that if user clear the item input field. the other values (quantityu and price) not removed programmatically.
My view:
<tr ng-repeat="sellAcc in sellAccessories">
<td colspan="2">
<input type="text" id="sellAccessName{{$index}}"
list="sellAllaccessories{{$index}}"
ng-model="sellAccessories[0].name[$index]"
ng-change="getItemSellingPrice($index); isExistItem($index)" >
<datalist id="sellAllaccessories{{$index}}" >
<option ng-repeat="access in allAccessories" data-item="{{access.id}}" value="{{access.name}}">
</datalist>
</td>
<td colspan="1">
<input type="number" ng-model="sellAccessories[0].quantity[$index]">
</td>
<td colspan="2" >
<input type="text" ng-model="sellAccessories[0].total_price[$index]"
ng-value="sellAccessories[0].total_price[$index]=sellAccessories[0].quantity[$index] * access_s_price[$index]"
readonly>
</td>
</tr>
JS:
$scope.sellAccessories=[{"id": [],"name": [], "quantity": [],"total_price": []}];
i store all values in the array using ng-model=sellAccess[0].name[$index], the problem is that if user removed the item name, what happens is name array will not be equal to the quantity and total price
.Assume that the user select 4 items and then remove an item that have quantity=4, then this what will happen:
name=["Nescafe","Pepsi","Tobacco"]`
quantity[1,4,2,5]`
while it should be:
name=["Nescafe","Pepsi","Tobacco"]`
quantity[1,2,5]`
many thanks for any help.

How to clone form elements with auto increamented id to all elements

I have a form under a . I want to clone this and append dynamically in another and so on dynamically. Also I need to assign auto incremented id to all form elements too. Apart from pure javascript I can not use any jQuery or any other library.
Here is my HTML
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /><input type="radio" id="mandatory" name="mandatory" value="false" /></td>
<td>Delete Button</td>
</tr>
Here is my JavaScript
var i = 0;
this.view.findById("start").addEventHandler("click", function () {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
original.parentNode.appendChild(clone);
})
Presently I can cloned the form elements in <tr id="repeated1"> dynamically and so on, but unable to assign auto incremented id to input box and select box . Also unable to assign auto incremented name to the radio buttons dynamically

You can change Id or another attribute as you want.
but for your code my solution is using querySelectorAll to get element and change it's Id, something like below code, it is tested and works nice:
Based on this HTML design code and JS function:
function MakeElementsWithDifferentId() {
for (var i = 1; i < 10; i++) {
var original = document.getElementById('repeat');
var clone = original.cloneNode(true);
clone.id="repeat"+i;
clone.querySelectorAll('[id="fieldName"]')[0].id ="fieldName"+i;
clone.querySelectorAll('[id="fieldType"]')[0].id ="fieldType"+i;
clone.querySelectorAll('[id="mandatory"]')[0].id ="mandatory"+i;
clone.children[2].children[0].name="mandatoryName"+i; //To change the radio name also
original.parentNode.appendChild(clone);
}
}
MakeElementsWithDifferentId();
<table>
<tr id="repeat">
<td><input type="text" id="fieldName" /></td>
<td>
<select name="fieldType" id="fieldType">
<option value="string">String</option>
</select>
</td>
<td><input type="radio" id="mandatory" name="mandatory" value="true" /> </td>
<td>Delete Button</td>
</tr>
</table>
the MakeElementsWithDifferentId() function make 10 batch elements with different Ids.
the JSFiddle Test
after run you can right click on element that you want and see the Id by inspect element.
Note:
Instead of clone.querySelectorAll('[id="fieldName"]')[0] it's better to get element by querySelector like clone.querySelector('[id="fieldName"]')
Hope will help you.

How to calculate value from a dynamically generated table and its rows using angular js?

I am trying to find the value for net worth from the table.
Net Worth = Sum(Stock Price * Shares Held)
Below is the table which is created as per user selection.
For ex: from the above table, Net Worth = (842.21*1 + 230.16*2 + 1002.2*2).
I am trying with ng-change as the networth can change every time the user adds or deletes stocks. Besides, I am also facing the css issue as networth goes down when a row is getting added to table.
Here is the plnkr.
<section class="pickstocks">
<label class="basiclabel">Manage Portfolio</label>
<div class="pickstocks-align">
<table>
<thead>
<tr>
<th>STOCK</th>
<th>PRICE</th>
<th>SHARES</th>
<th>WEIGHT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stock in stocksArray" class="portfoliokey">
<td>{{stock.key}}</td>
<td class="portfoliovalue">{{"₹" + stock.value}}</td>
<td class="changer">
<input type="button" id="num1" ng-click="decrementValue( stock.index )" value="-">
<input type="button" id="number{{ stock.index }}" value="1" />
<input type="button" ng-click="incrementValue( stock.index )" value="+" />
</td>
<td>{{stock.weight}}</td>
</tr>
</tbody>
</table>
<div class="networth">
<h3>Networth</h3>
</div>
</div>
</section>

Here is the Plunker for reference
The first thing to do is to store the weight field just like another field in the stock object.
mystock.weight = function(){return this.value*this.shares};
Making it into a function of the shares and value field lets us update the other two fields dynamically changing the networth. Also adding shares as a field to the stock object lets us update it easier later, so we only have to increment/decrement the field like so.
$scope.stocksArray[$scope.stocksArray.indexOf(stock)].shares++;
The biggest part of changing the code was objectifying it. Taking the stocks and representing it with objects allows us to easily modify and access the values later.
Once that was done all you have to do is make a method that returns the sum of all of the weights like so.
$scope.getNetWorth = function(){
let total = 0;
for(let i = 0; i < $scope.stocksArray.length; i++){
total += $scope.stocksArray[i].weight()
}
return total.toFixed(2);
}
And then reference it in the html like so {{"₹" +getNetWorth()}}
In the future try to use OOP practices to simplify your code and turn your data into object representations, it will save you time and headache trying to manipulate and access your data later.

you need to calculate sum at each instance
<tr ng-repeat="stock in stocksArray" class="portfoliokey">
<td>{{stock.key}}</td>
<td ng-init="totalAmount = totalAmount + (stock.value*stock.index)" class="portfoliovalue">{{"₹" + stock.value}}</td>
<td class="changer">
<input type="button" id="num1" ng-click="decrementValue( stock.index )" value="-">
<input type="button" id="number{{ stock.index }}" value="1" />
<input type="button" ng-click="incrementValue( stock.index )" value="+" />
</td>
<td>{{stock.weight}}</td>
</tr>
and total will be
<div class="networth">
<h3>{{totalAmount }}</h3>
</div>

Javascript Addition calculator

enter image description here
how do i create this in html.
when a user enter a value in textbox and click on Addition button then textbox became empty and addition button be disabled. then user enter second value and click on = button that show the result in textbox.

It's really hard to understand what are you exactly want based on question, however I've prepared a basic fiddle for you that should fix your problem or hopefully gives you and idea:
https://jsfiddle.net/Lzg5rfgr/
<table>
<tr>
<td>
<input type="number" id="userNumber">
</td>
</tr>
<tr>
<td>
<button id="plus">+</button>
</td>
<td>
<span id="enteredNumber"></span>
</td>
</tr>
<tr>
<td>=</td>
<td>
<span id="result">0</span>
</td>
</tr>
</table>
javascript using jquery:
$("#plus").on('click', function(){
var num = parseInt($("#userNumber").val()); // get the number
$("#result").html(num + parseInt( $("#result").html()) );
$("#userNumber").val(null); // empty the input box
$("#enteredNumber").html(num);
})

How can I select the values of the input checked rows into a table?

I am pretty new in JavaScript development and I have the following situation.
Into a JSP page I have a table having the following strutcure
<TABLE class=standard-table-cls id=senttable>
<TR class=odd>
<TD>
<INPUT name=item type=checkbox alt=Cancella value=68662>
</TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TR>
<TR class=even>
<TD>
<INPUT name=item type=checkbox alt=Cancella value=68661>
</TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TD> ......................................... </TD>
<TR>
<TR class=odd> ....................................................</TR>
<TR class=even> ....................................................</TR>
<TR class=odd> ....................................................</TR>
<TR class=even> ....................................................</TR>
........................................................................
........................................................................
</TABLE>
As you can see in this table there is a specific column (the first one) that represent a checkbox that the user can check. This column have always setted the value that represent the ID of the object represented by the current row (in the previous example: 68662 and 68661, etcetc)
What I need to do is create a JavaScript function that create a string representing the concatenation of all the values of the value field of the checked rows.
For example if the first 2 rows are checked this string have to be something like: 68662-68661
How can I do something like this?
Tnx

You can use $.fn.map method in combination with join:
var values = $('#senttable :checkbox:checked').map(function() {
return this.value;
}).get().join('-');

You can change your html markup a little bit like this :
<input type="checkbox" name="item[]" value="68662" alt=Cancella>
Then you can call the following javascript function to get the '-' separated string that you need.
function getString()
{
$('input[name="item[]"]:checked').each(function() {
var returnString="";
if($(this).is(':checked'))
{
var chkboxval = $(this).val();
returnString= chkboxval + "-" + returnString
}
}
);
return returnString;
}