I have 2 tables i want to push the row of the first table to the second.
table 1 :
<table>
<tr ng-repeat="row in items">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
</table>
<button ng-click="pushRows(row)"> </button>
table 2 :
<table>
<tr ng-repeat="row in products">
<td>{{row.PRODUCTDESCRIPTION}}</td>
<td><input type="text" ng-model="quantity[$index]"></td>
</tr>
i need to push the row in table 1 to the table 2 (my problem is how to push the input type text with its value)
You can use ng-model and create a new property on all the items.
plunker Example
Related
I have an ngFor which will iterate number of tables for me,In my case 3(not static) tables will be generated with the ngFor i am using, and inside the table I have rows that are to be generated, using another ngFor, but now, the problem, if my first is having less amount of data, say 2 rows of data, and my third table is having 6 rows of data, then the height of tables isn't constant.
Expected Solution: All tables should be of equal height, if table 3 has 6 rows, then table 1 and table 2 should also have 6 rows, Lets keep the rows the static, i mean irrespective of data, each table should be able to show 6 rows. if table 2 has data for 2 rows then remaining 4 rows should be empty.
<div
class="shift-table"
[ngClass]="{ disablePreviousRecord: isPreviousWeekRecord }"
[attr.disabled]="isPreviousWeekRecord"
>
<div class="shift-name " *ngFor="let roster of rosterInfo">
<span>Shift - {{ roster.shiftName }}</span>
<table
class="table scrollbar"
id="customScrollDiv"
style="background-color: white; color:#EBF4FF"
>
<thead style="background-color: #9AA7C7;">
<tr class="header">
<th>
Copy
</th>
<th>
Person Name
</th>
<th>
Role
</th>
</tr>
</thead>
<tbody class="text-black-50">
<tr class="dataRow" *ngFor="let user of roster.userDetails">
<td>
<input type="checkbox" [disabled]="isPreviousWeekRecord" />
</td>
<td>
{{ user.userId }}
</td>
<td>
<span *ngFor="let role of user.roles; let i = index">
{{ role }} {{ i === user.roles.length - 1 ? '' : ',' }}
</span>
</td>
</tr>
</tbody>
</table>
I have created an angularjs table with the help of an array.
Below is the reference code :-
HTML code:-
<table align="center">
<thead>
<tr>
<th>Session Code</th>
<th>Session Name</th>
</tr>
<tr>
<td>
<input type="text" placeholder="First Name" title="Enter First name here to filter data" ng-model="firstNameText"
/>
</td>
<td>
<input type="text" placeholder="Last Name.." title="Enter Last name here to filter data" ng-model="lastNameText"
/>
</td>
</tr>
</thead>
<tr ng-repeat="tr in Names | filter:{First_x0020_Name:firstNameText,Last_x0020_Name:lastNameText}" style="cursor:pointer">
<td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.First_x0020_Name}}</td>
<td data-ng-cloak ng-click="getInfo($index,$event)">{{tr.Last_x0020_Name}}</td>
</tr>
</table>
When you clicked on the table data of a row you get alert of the First Name and Last Name of row that you have clicked.
Below is the code when clicked on the table data.
$scope.getInfo = function(index,$event){
alert($scope.Names[index].First_x0020_Name + ' , ' + $scope.Names[index].Last_x0020_Name);
}
It works when the data is not filtered.
But when I filtered data using input in table header and click on the table data, it gives wrong name and surname.
I want to get the first name and last name of the person that I have clicked even it is filtered.
I know that the getInfo function that I am using gets the data from non - filtered names array.
How can I use the filtered angularjs table then ?
Instead of index you can pass row object to your function
html
<td data-ng-cloak ng-click="getInfo(tr,$event)">{{tr.First_x0020_Name}}</td>
js
$scope.getInfo = function(row,$event){
alert(row.First_x0020_Name + ' , ' + row.Last_x0020_Name);
}
I am having a problem where when I run this code which reads data from 2 files both containing 10 numbers. These are both stored seperately in the mainlist but the only problem is when I try to output them into a table, instead of putting each one under its title it just puts both under the "List1" title in a 20 long list. So how do I make mainlist[0] appear under list 1 and mainlist[1] under list 2. Sorry that my code is very messy and very basic as I have only just started learning JS and Angular.
<div id="Tables">
<table>
<tr>
<th>List1</th>
<th>List2</th>
</tr>
<tr>
<tr ng-repeat="i in mainlist[0]">
<td>{{i}}</td>
</tr>
<tr ng-repeat="i in mainlist[1]">
<td>{{i}}</td>
</tr>
</tr>
</table>
</div>
JSfiddle
I hope you're liking Javascript and AngularJS so far! To answer your question the way that tables are created via HTML is row based and not column based meaning <tr> encapsulates cells,<td>, so to create tables you are filling in rows by cells. To accomplish what you want solely through HTML and no additional Javascript you could think of your data being two cells within a single row instead of several rows per column.
I wrote up a quick example of how you could accomplish this through nesting tables. So why nest tables and not just put <td><tr></tr></td>? Row elements cannot be placed within cell elements, but tables can! If you try to place <tr> within <td> it will be rendered ignoring <td>.
I hope this answers your question.
https://jsfiddle.net/krd4p0yt/
var myApp = angular.module('myApp', []);
myApp.controller('TestCtrl', ['$scope',
function($scope) {
$scope.mainList = [
[1, 2, 3],
[4, 5, 6]
];
}
]);
table {
border: 2px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="TestCtrl">
<table>
<th>List 1</th>
<th>List 2</th>
<tr>
<td>
<table>
<tr ng-repeat="i in mainList[0]">
<td>{{i}}</td>
</tr>
</table>
</td>
<td>
<table>
<tr ng-repeat="i in mainList[1]">
<td>{{i}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
Here is a solution for your case based on the fact that the two lists have equal length:
<table ng-init="items = mainList[0]">
<tr>
<th>
List 1
</th>
<th>
List 2
</th>
</tr>
<tr ng-repeat="item in items">
<td>
{{item}}
</td>
<td>
{{mainList[1][$index]}}
</td>
</tr>
</table>
I need your help. I have 2 fields for input dimension of table (input for number of rows and columns) and one button. If I click this button, table should be filled dynamically with given number of rows and columns. How can make this functionality, that table be filled with values starting from bottom right cell spiral / in circuit to the left and top until all cells (in clockwise direction)...
What is the best way to this with HTML, AngularJS, jQuery / JavaScript. (See picture)
http://i.imgur.com/O4GRpND.jpg
Thanks a lot
Currently i have made something just like this:
Cyclic table
<fieldset>
<legend>Input</legend>
<label id="nameRow" >Number of Rows</label> <br />
<input type="number" ng-model="row" placeholder="Row" ><br /><br /><br />
<label id="nameCol">Number of Columns</label> <br />
<input type="number" ng-model="col" placeholder="Column" ><br />
<br></br>
<button type="button" ng-click="addRowCol()">KREIRAJ TABLICU</button>
</fieldset>
<table border="1" cellpadding="10">
<body>
<tr ng-repeat="input Rows and Columns">
<td>
{{ input.row }}
</td>
<td>
{{ input.column }}
</td>
</tr>
</body>
</table>
Assign your rows and columns to a variable on the scope. Then in your template do an ng-repeat for the number of columns and rows and output the table. You might need to convert the number into an array first.
Something like this:
In the controller:
$scope.columns = 5;
$scope.rows = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
In the view:
<table>
<thead>
<th ng-repeat="col in getNumber(columns)" ></th>
</thead>
<tbody>
<tr ng-repeat="col in getNumber(rows)" >
<td ng-repeat="row in getNumber(columns)" ></td>
</tr>
</tbody>
</table>
If you had an array of values and wanted to print out the values you can do that with curly braces inside your ng-repeat as col or row dependent on the data.
Hope this helps!
I want to ask you if you can help me to dynamiclly attribute ng-model name to an input radio in HTML table, using ng-repeat,
this my code
<tbody>
<tr ng-if="$index>0" ng-repeat="row in resultatfinal">
<td ng-repeat="k in [] | range:collumnLength">{{ row [$index] }}</td>
<td ng-repeat="i in [] | range:3"><input type="radio" ng-model="i" value="i" /> </td>
</tr>
</tbody>
i would like to attribut name like
inputradio11 for the firt radio input in the first row
inputradio12 for the firt radio input in the first row
inputradio13 for the firt radio input in the first row
inputradio21 for the firt radio input in the second row
thank you
this is the solution, i have juste used the id of the parent with $parent.$index to the indice of row, column indice i have the i var
<tbody>
<tr ng-if="$index>0" ng-repeat="row in resultatfinal">
<td ng-repeat="k in [] | range:collumnLength">{{ row [$index] }}</td>
<td ng-repeat="i in [] | range:3"><input type="radio" name="{{$parent.$index}}{{i}}" value="{{i}}" /></td>
</tr>
</tbody>