Develop Reference

AngularJs: Show/Hide table column based on dropdown in first column

Using angularjs
I have a table which column one I am binding it to a an array.
Second column is a dropdown.
I want to have other 5-6 columns (text and dropdown) which I want to show/hide based on the value of second column dropdown.
I tried the below code:
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items">
<td >{{item.name}}</td>
<td >
<select name="utype" class="form-control input-medium" ng-model="utype">
<option value="">---Please select---</option>
<option ng-repeat="type in types" >{{type.text}}</option>
</select></td>
<td><span ng-hide="utype =='Type1' || utype!=undefined" >{{item.value}}</span></td>
<td><button class="btn btn-small" ng-click="edit(item)">Edit</button></td>
</tr>
</tbody>
</table>
ng-hide="utype =='Type1' || utype!=undefined"
But this only works the first time. After hiding it does not work.
Could anyone point what I need to do to make it work:

utype!=undefined is always true after you set ng-model="utype"> the first time.
Take out utype!=undefined and try it.
<td><span ng-hide="utype =='Type1' >{{item.value}}</span></td>
Also, imo, you should use === rather than '=='. see this SO answer for details.
e.g.. ng-hide="utype ==='Type1'

How to use jQuery to get Input Field Value of dynamic table

I'm currently using Meteor/Blaze framework to build a table. The row in the table will change according to the selected supplier. I have added class={{_id}} to the field and q.{{_id}} , lot.{{_id}} , and exp.{{_id}} to the quantity, lot , and expire date INPUT.
I'm trying to write a Submit Events to get these value and pass it to the Mongo Database. Please suggest a good way to loop through these rows to get the value.
Website Image
Part of the code
receiveForm template
<template name="receiveForm">
...
<select data-placeholder="Select an option" class="sel2js form-control select select-primary" id="supplier_sel" name="supplier">
{{#each suppliers}}
{{> sel_supplier}}
{{/each}}
</select>
</div>
<!-- Receive Lot Table -->
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Current Quantity</th>
<th>Unit of Measurement</th>
<th>Receive Quantity</th>
<th>Lot No</th>
<th>Exp Date (DD/MM/YYYY)</th>
</tr>
</thead>
<tbody>
{{#each items}}
{{> receiveRow2}}
{{/each}}
</tbody>
</table>
<div class="text-center">
<button type="submit" class="btn btn-embossed btn-primary btn-wide" id="submitNewReceive" value="Submit">Submit</button>
<button type="reset" class="btn btn-embossed btn-warning btn-wide" value="Reset">Reset</button>
</div>
</form>
receiveRow2 template
<template name="receiveRow2">
<tr id="{{_id}}">
<td class="pn">{{name}}</td>
<td class="pq">{{totalQuantity}}</td>
<td>{{uomid.name}} ({{uomid.unit}} {{uomid.unitname}}/{{uomid.name}})</td>
<td><input type="text" class="form-control" name="q.{{_id}}" placeholder="Quantity" /></td>
<td><input type="text" class="form-control" name="lot.{{_id}}" placeholder="Lot No XX/YYYY" /></td>
<td>
<div class="input-group datetimepicker text-primary">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<input class="set-due-date form-control" name="exp.{{_id}}" type="text" placeholder="วัน/เดือน/ปี"/>
<hr />
</div>
</td>
</tr>
</template>
JS
Template.receiveForm.events({
'submit form': function(event, template){
var supplierSelected = Template.instance().supplierSelected;
items = Products.find({suppliers: supplierSelected.get()});
event.preventDefault();
docdate = event.target.docdate.value;
supplier = event.target.supplier_sel.value;
console.log("---event---");
console.log(docdate)
console.log(supplier)
items.forEach(function(item){
????
})
}
})

In line 4 its missing a var before items, and also in line 6, 7.
After that I think you can loop on them.(But they will come from the DB).
BUT if you want to get the input values, why would you ask for a data in MongoDB?
Also I would prefer to get DB values as a promise.
var items = Promise.resolve(Products.find({suppliers: supplierSelected.get()});
and get back the items in this way:
items.then(function(item){console.log(item)})

HTML Table - Track Selections for Form Submission

I've created a simple table using Bootstrap and PHP which looks like this:
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<button type="button" class="btn btn-success btn-sm">Yes</button>
<button type="button" class="btn btn-danger btn-sm">No</button>
</td>
</tr>
</tbody>
</table>
This is part of a form that will be submitted and I need to track which rows were selected Yes and which rows were selected No. I would also like to add a .success class to the table row when Yes is clicked (and remove a .danger class if previously present), and when No is clicked add a . danger class to the table row (and remove a . success class if previously present).
If the user clicks Yes I would like to track the id value for the Row in a variable/array somehow and the same for the No selections. If the user changes a selection it should also remove the value from the original variable/array - e.g. if they first clicked No and then they click Yes it should add the value to the 'Yes' variable/array list and remove it from the 'No" variable/array list.
I'm still learning HTML, Javascript and CSS as I'm going so not sure what the best approach here is and how to implement a system that tracks selections and makes those available as POST values to include in the form submission?

Try using this
var store={};
//store all values of succes fauilure in an object coresponding to the id
$("[id^=RFIT]").each(function(e,i){store[i.id]=$(i).hasClass('success')?'success':'danger'});
//on click update the closest tr class and store
$('button').click(function(){
if($(this).hasClass('btn-success')){
result='success';
}else{
result='danger';
}
$(this).closest('tr').attr('class',result);
store[ $(this).closest('tr').attr('id')]=result;
});

<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Name</th>
<th scope="col">Date</th>
<th scope="col">Select</th>
</thead>
<tbody>
<tr id="RFIT1000">
<td>Penny Lane</td>
<td>10/03/2015</td>
<td colspan="2">
<label><input name="row1" id="row1Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row1" id="row1N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1001">
<td>Fred Kruger</td>
<td>18/01/2016</td>
<td colspan="2">
<label><input name="row2" id="row2Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row2" id="row2N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
<tr id="RFIT1002">
<td>Bob Hope</td>
<td>09/08/2016</td>
<td colspan="2">
<label><input name="row3" id="row3Y" type="radio" class="btn btn-success btn-sm">Yes</label>
<label><input name="row3" id="row3N" type="radio" class="btn btn-danger btn-sm">No</label>
</td>
</tr>
</tbody>
</table>
You can use radio button to get user response also you can provide id to those radio button to catch event in java script using that you can change classes of row at run time.
Hope it will help you, still if any doubt ask me I will provide java script code too.
I have used same name to radio buttons in one row as to read input in PHP and different id to handle different event in java script.

Angular Js: validating duplicate object key in table

I have a table with two column "user type" and "user Name" User type having a drop down selection So that i can select predefined user type and place a name in User name. There is a Add button on each click i am adding one another row.
I am doing one validation here So that user can't selected repeated "User type".
for example from row 1 is i select "value 1" from drop down. then from row 2 i should not be able to select same value. Anyway this validation works fine.
but there is one scenario if I add a duplicate row, then remove it right away, I am still unable to save because the validation error is still there.
here my jsp-
<div ng-class="{'col-sm-9'}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>user type</th>
<th>user Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in edituserConfig track by $index" ng-form="jobfileForm">
<td><select class="form-control" ng-model="object.key" required ng-change="reValidateJob()" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="value1">value1t</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
<option value="value5">value5</option>
</select></td>
<td><input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/></td>
<td >
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1)" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="edituserConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
My controller-
$scope.reValidateJob = function(){
angular.forEach($scope.edituserConfig, function(fieldMapO) {
var count = 0;
angular.forEach($scope.edituserConfig, function(fieldMapI) {
if(fieldMapO.key == fieldMapI.key){
count ++;
}
});
if(count >1){
fieldMapO.form.jobFileKey.$setValidity("duplicate",false);
}else{
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
}
});
};
Please advise me on delete button do i need to vaidate all the row again? any good solution?

Well, I think following should work. If not, I'd request you to create a js-fiddle or plunker.
add reValidateJob to ng-click of the add button like below
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="edituserConfig.splice($index,1); reValidateJob();" ng-form="jobfileForm" title="Delete">
<span class="glyphicon glyphicon-remove"></span>
</button>
Hope this helps!

Array splice removes the wrong element in AngularJS

I read all the other questions by others and answers, but still can't figure it out..
HTML:
<table class="table table-striped" ng-show="coffees.length>0">
<thead>
<tr>
<th>Drink</th>
<th>Price</th>
<th>Number per week</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in coffees">
<td>{{c.type}}</td>
<td>{{c.price | currency:"£"}}</td>
<td>{{c.numberpw}}</td>
<td><a href ng-click="removeCoffee($index)">X</a></td>
</tr>
</tbody>
</table>
app.js:
var app = angular.module("calculator",[]);
app.controller('pageController',function($scope){
$scope.coffees=[];
});
app.controller('coffeeController',function($scope){
$scope.addCoffee=function(coffee){
$scope.coffees.push(coffee);
$scope.coffee={};
}
$scope.removeCoffee=function(el){
$scope.coffees.splice($scope.coffees[el],1);
}
});
coffeeController is nested within pageController, so I can access $scope.coffees inside the coffeeController. And addCoffee function accepts an object that looks like this:
<select name="CoffeeType" ng-model="coffee.type" ng-options="type for type in
['Espresso','Latte']" class="form-control" required>
<option value="">Please select</option>
</select>
<input type="text" placeholder="£00.00" ng-pattern="/^0|[1-9][0-9]*$/" ng-model="coffee.price" name="CoffeePrice" class="form-control" required />
<select name="NumberPerWeek" class="form-control" ng-model="coffee.numberpw" ng-options="n for n in [1,2,3,4,5]" required>
<option value="">Please select</option>
</select>
<input type="submit" class="btn btn-primary pull-left" value="Add Drink" ng-click="addCoffee(coffee)" />
It adds objects perfectly but removes the wrong object every single time..

splice expects start/count integers. $scope.coffees[el] is an object but you're passing in the $index to the method. Update your remove method as follows:
$scope.removeCoffee=function(el){
$scope.coffees.splice(el,1);
}