I have a couple of arrays and am looping through them to build a table. The first header row is an array of column names and the second a row of select boxes that the user will use to select to map to the above column names
<h2>CSV Parser</h2>
<div class="alert alert-info" ng-if="helpText">
{{helpText}}
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th ng-repeat="col in data.cols track by $index">{{col}}</th>
</tr>
<tr>
<th ng-repeat="col in data.cols track by $index">
<select class="form-control"
ng-options="colToMap as colToMatch for colToMatch in colsToMatch"
ng-change="setColMap($index,colToMap)"
ng-model="lastFieldSet[$index]">
<option value="">Select Field</option>
</select>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data.rows track by $index">
<td ng-repeat="text in row track by $index">{{text}}</td>
</tr>
</tbody>
</table>
When I change any of the selects the change function does not fire at all but if I change it to a click, it fires. At no time does the lastFieldSet[] model get updated.
Any ideas as to what is going on here?
To expand on the answer by #worldask:
An ng-change expression is only fired when there is a input value change that results in a new value for the model. It is for this reason why ng-change only works on input. Basically, in your code angular does not know when ngChange should be fired because there is not a value change to the model.
according to offcial api document, ng-change only works on input
Evaluate the given expression when the user changes the input.
Related
How to access the rows of ng-repeat of array of arrays?
in jsp:
I have one json array object which have content of table.
and another array object table header.
so below I used to implement it. But I have one situation that if col1 data is Y then I need to display one check box. How to check that..
<body ng-app="myApp" ng-controller="mainCtrl">
<div class="table-container">
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th lr-drag-src="headers" lr-drop-target="headers" ng-repeat="col in columns" st-sort="{{col}}">{{col}}</th>
</tr>
<tr>
<th>
<input st-search="firstName" placeholder="search for firstname" class="input-sm form-control" type="search"/>
</th>
<th colspan="4">
<input st-search placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns**>{{row[col]}}</**td>
</tr>
</tbody>
</table>
</div>
<div ng-show="isLoading" class="loading-indicator"></div>
</body>
Single array:
')" id = "checkExport" value = "{{result.TX_ID}}">
{{result.TX_ID}}
{{result.value2}}
You can use rowCollection[1].columns with foreach to find if some value in columns contains Y. But the better way just use ng-show="col === Y" as attribute to your checkbox. Or ng-hide if you need to hide it.
I have example code below where I am supposed to create a list of items.
<div ng-hide="listTrigger">
<!--FIRST TABLE-->
<table class="table table-bordered table-striped">
<thead>
<tr>
<th sortable="code" class="sortable">
Product Name
</th>
<th sortable="placed" class="sortable">
Qty
</th>
<th class="st-sort-disable th-dropdown">
Price
</th>
<th sortable='total.value' class="sortable">
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr grid-item>
<td width="40%">
<select class="form-control" ng-model="prod.uid">
<option selected disabled>Select Product</option>
<option ng-repeat="product in products | orderBy : 'name'" ng-value="product.uid" >{{product.name}}</option>
</select>
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.qty" class="form-control">
</td>
<td width="20%">
<input type="number" min="0" ng-model="prod.price" class="form-control">
</td>
<td width="10%">
<input type="number" min="1" max="100" ng-model="prod.split" class="form-control">
</td>
<td width="10%"><button ng-click="addNewProduct(prod.id)" class="form-control">Add</button></td>
</tr>
</tbody>
</table>
<!--SECOND TABLE-->
<table ng-show="newProducts.length!=0" class="table">
<thead>
<tr>
<th >
Product Name
</th>
<th >
Qty
</th>
<th >
Price
</th>
<th >
Split
</th>
<th>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="newProduct in newProducts">
<td width="60%" ng-bind="newProduct.uid"></td>
<td width="10%" ng-bind="newProduct.qty"></td>
<td width="10%"ng-bind="newProduct.price"></td>
<td width="10%" ng-bind="newProduct.split"></td>
<td width="10%"><button ng-show="newProducts.length!=0" ng-click="removeProduct(newProduct.uid)">X</button></td>
</tr>
</tbody>
</table>
Output
but whatever i type in the textbox of first table is coming just like that in second table. It is supposed to come list by list
In JS I am getting all details from input fields and settinf to an object prod and then pushing it in to an array newProducts.
Later in the table I am using ng-repeat to repeat items in newProducts array. The top table and bottom table are connected in no other way and I cannot figure out why values are chaging in bottom table when they are changed in input fields. Also while trying to add it one more time, it throws an error.
jquery.js:4409 Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=newProduct%20in%20newPr…0a-42d3-949e-3e8e59ac2be9%22%2C%22%24%24hashKey%22%3A%22object%3A359%22%7D
Here is the JS to add new item
//function to add new product while creating
$scope.addNewProduct= function(id){
$scope.newProducts.push($scope.prod);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
I tried console.log to log newProducts array in console, it is getting updated with new array , but not showing up in second table. Please help!
use angular copy.
angular $scopes are two way binded.. the changes u make in first table will be reflected in second table as you are pushing $scope.prod which is two way binded.
Using $scope can be very tricky. I'm not the best in Angular but i have no idea
$scope.newProducts.push($scope.prod);
if you are using here the $scope of the function or the $scope of the Controller.
Put in at the very top of your Controller "var vm=$scope", and in your html use "Controller as vm".
So if you are then there, we can see if the problem still exists.
Angular variables are reference type. So you can use angular.copy() to overcome from this issue. Below the code.
$scope.addNewProduct= function(id){
var products = angular.copy($scope.prod);
$scope.newProducts.push(products);
console.log("product array-"+JSON.stringify( $scope.newProducts));
}
Hope it will help you thanks.
I am new to AngularJS and have a pretty basic problem I guess.
I have a drop-down list and based on the selection I want a table underneath to update with the belonging information.
<div ng-controller="RightCtrl as right">
<select ng-model="right.selectedModule">
<option ng-repeat="module in right.modules" value="{{module.id}}">{{module.name}}
</option>
</select>
<table>
<thead>
<th>Right name</th>
<th>Description</th>
</thead>
<tbody ng-repeat="module in right.modules | filter: right.isCurrent">
<tr ng-repeat="selRight in module.rights">
<td right-id="{{selRight.id}}">{{selRight.name}}</td>
<td>
{{selRight.description}}
</td>
</tr>
</tbody>
</table>
</div>
I have a jsfiddle (http://jsfiddle.net/EN3S9/) and appreciate every help. Probably I am not completely understanding the concept yet.
I think what you are looking for is to filter based on the selected object like:
<tbody ng-repeat="module in right.modules | filter:right.selectedModule">
Here is the full demo:
Online Demo
I have a question about ng-switch rendering order.
Code(HTML):
<div ng-controller="testCtrl">
<button ng-click="v1 = !v1">toggle v1</button>
<table class="table table-bordered">
<tbody>
<tr ng-switch on="v1">
<th ng-switch-when="true">V1</th>
<th ng-repeat="item in datas">{{item}}</th>
</tr>
</tbody>
</table>
Code(Javascript):
var myApp = angular.module('myApp',[]);
function testCtrl($scope) {
$scope.datas = ['A', 'B'];
}
I expected a result by the order :
V1 A B
But instead, the output shows ng-repeat items first, followed by ng-switch-when statement.
Why's that?
Is there an alternative solution to do such thing in my expected order?
JSFiddle sample here.
============================
Update (2014/04/02) :
Here's the explanation for why ng-show is not an option.
I write a directive table like this :
<table class="table table-bordered">
<thead>
<tr>
<th ng-show="checkbox"><input type="checkbox" /></th>
<th ng-repeat="col in columns">{{col.text}}</th>
</td>
</thead>
<!-- body is ignored -->
</table>
The checkbox variable is for controlling whether the checkbox input should be showed.
This works fine until I apply JQuery ColResize.
When the checkbox variable is false, the ng-show hides the first th element.
And somehow the hidden th element causes JQuery ColResize to malfunction.
Therefore ng-show is not suitable for this situation.
========================
Current Solution :
My current solution is using ng-switch to separate two table element.
And use one variable to decide which table to draw.
Like this :
<div ng-switch on="checkbox">
<table ng-switch-when="true">
<tr>
<th><input type="checkbox" /></th>
<th ng-repeat="col in columns">{{col.text}}</th>
</tr>
<!-- body is ignored -->
</table>
<table ng-switch-default>
<tr>
<th ng-repeat="col in columns">{{col.text}}</th>
</tr>
<!-- body is ignored -->
</table>
</div>
Although this solve the problem, it is not a good solution.
But until I find an alternative solution.
I think I will have to settle for this.
You can use ng-show instead of ng-switch as shown in this modified JSFIDDLE
<tr>
<th ng-show="v1">V1</th>
<th ng-repeat="item in datas">{{item}}</th>
</tr>
ng-show applies style around the DOM element where the directive is used to show/hide respectively. In your case the header is compiled appropriately but will only be shown based on the condition that is provided to ng-show.
I have a table I wish to filter with a select box. If I try to filter it with an <input>, it works great. But when I do it with a <select>, the table gets empty. I've commented out the <input>, which works. Any ideas why I can’t filter with select?
<fieldset ng-controller="DimensionListCtrl">
Pipe: <select ng-model="query2.code"
ng-options="pipe.code for pipe in pipes"></select>
<!-- Search: <input ng-model="query2.code"> -->
<table class="table table-striped">
<thead>
<tr>
<th>Code</th>
<th>Pipe title</th>
<th>Size</th>
<th>Inner diameter</th>
<th>Outer diameter</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dimension in dimensions |filter:query2">
<td>{{dimension.code}}</td>
<td>{{dimension.title_en}}</td>
<td>{{dimension.nominalsize}}</td>
<td>{{dimension.innerdiameter}}</td>
<td>{{dimension.outerdiameter}}</td>
</tr>
</tbody>
</table>
</fieldset>
You're not using the correct model, it's a select, so you don't need to suffix it.
http://plnkr.co/edit/PTJ390DpRlOev9tjcKJY?p=preview