I'm new to Angular, as will probably become apparent!
I've created a view with a few tables of data to show users different statistics. A simple example would be:
<div class="table-container">
<table class="percs">
<thead>
<tr>
<td>Stat Name</td>
<td>Stat Value</td>
<td>Stat bar</td>
</tr>
</thead>
<tbody>
<tr>
<td>Stat 1</td>
<td>{{ statPercs.stat1 }}</td>
<td><uib-progressbar value="statPercs.stat1"></uib-progressbar></td>
</tr>
<tr>
<td>Stat 2</td>
<td>{{ statPercs.stat2 }}</td>
<td><uib-progressbar value="statPercs.stat2"></uib-progressbar></td>
</tr>
</tbody>
</table>
</div>
I'm using the progressbar just for a small visual representation of the data. However if my understanding so far is correct, although each row in the table only references one value it will incur 2 $$watchers by being referenced in 2 separate tags.
Is it possible to achieve this with just one binding per value (i.e. "statPercs.stat1", "statPercs.stat2", etc) but still be able to re-use that value in multiple columns of the table?
Or even better still, one binding for the object itself (i.e. "statPercs") and still be able to use the values contained in that object in multiple places in the table?
Related
I have two arrays of variable lenghts containing html which need to be displayed side by side in a table by index. So arrayA[0] should be in the same row as arrayB[0], and so on.
I figured I could do this with two ng-repeat-start directives, e.g.:
<table>
<tbody ng-repeat-start="arrayA">
<tr ng-repeat-start="arrayB">
<td bind-html="arrayA.Details"></td>
<td bind-html="arrayB.Details"></td>
<tr ng-repeat-end></tr>
<tbody ng-repeat-end></tbody>
</table>
However this does not seem to work. Any ideas?
Thanks
This is a json format from my database. How do i get a tabulated information of the names and phone numbers etc.
I will create a simple example with minimal table
<table>
<thead>
<tr>
<th>Car type</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach($posts as $post)
<tr>
<td>{{ $post->Cartype }}</td>
<td>{{ $post->email }}</td>
</tr>
#endforeach
</tbody>
</table>
If you want car types and banks as seperate entities, you have to declare the $banks and $carTypes as 2 arrays and get the necessary data for the arrays from the database.
After that you can then pass those arrays to the view. You can use the below code to pass multiple arrays to the view.
return view('yourview', compact('banks ','carTypes '));
After that in your view you can render your values using the foreach loop to get the values.
foreach($banks as $bank){
// Your code
}
foreach($carTypes as $carType){
// Your code
}
Hope this helps you :)
I have a table where its second column consists of multiple subheaders. For each row in the table, its data under the second column can consist of multiple rows. I’m having trouble syncing those multiple rows under the subheaders.
http://jsfiddle.net/jkkvy86x/
<table>
<thead>
<tr>
<th>col 1</th>
<th colspan="3">col2</th>
</tr>
<tr>
<th></th>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr>
<td>row1</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
</tr>
<tr>
<td>row2</td>
<td>data1</td>
<td>data2</td>
<td>data3</td>
</tr>
</tbody>
</table>
For row1, I want data4, data5, data6 to also be under h1, h2, h3, respectively.
I'm doing this in AngularJS/Bootstrap so the data/formatting is important. I don't think adding another row with a blank data for its first column would work although I'm open to solutions.
This is not angular. BTW, can you use <br/>?
I was working on a plnkr: http://plnkr.co/edit/XNQPnHM1z58XB5usioZA?p=preview
But with the structure I can do a better suggestion.
I working on a basic AngularJS application with a Firebase backend. Part of the database looks like...
Student
- FirstName
- LastName
- Schedule
-- Course1
-- Course2...
I have a page displaying an html table of students with ng-repeat. Here's the code for my table...
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Youth/Adult</th>
<th>Courses Selected?</th>
<th>...</th>
</thead>
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>{{ student.hasSelectedCourses }}</td>
<td>...</td>
</tr>
</tbody>
The controller connecting the data and table together is really straight forward. It's just grabbing the array of students from Firebase and chucking it into $scope.
$scope.students = Students;
I'm getting students' first and last names, so I know the repeat is working in general. But I'm having difficulty with one particular column I'd like to display - the Courses Selected? column. I'd like to intelligently fill that with a boolean (probably an icon or something) based on the existance of the Schedule hanging off the Student in the database. I thought of adding something like this to my controller (don't laugh - still learning JavaScript). This didn't work. The error was that "student" was undefined.
$scope.student.hasSelectedCourses = !($scope.student.schedule === null);
I think I could do this another way where I actually store hasSelectedCourses as a boolean in the database, but I'm concerned about the integrity of that field and getting into a situation where a student's selected courses and that field are not in sync with each other.
Is there a way to accomplish this with a bit of logic rather than data storage or is storing this in the database the way to go?
Assuming student.schedule is null if no courses selected (which is the normal pattern with firebase):
<tbody>
<tr ng-repeat="(id, student) in students">
<td>{{ student.firstName }}</td>
<td>{{ student.lastName }}</td>
<td>{{ student.type }}</td>
<td>
<span ng-if="student.schedule">Yes<span>
<span ng-if="!student.schedule">No<span> <!-- these spans could be icons or whatever you want -->
</td>
<td>...</td>
</tr>
</tbody>
Alternatively
<td>
{{student.schedule ? 'Yes' : 'No'}}
</td>
A side note: if you aren't already it's well worth it to include AngularFire with your app. The live 3-way binding is a good way to impress.
I am using Silenium IDE to test a website's table data. I have the Flow Control add-on, but I have a tricky loop to do.
I need to check each row of a table that its data contains certain text. The ID of each row has a different # identifying the given row. Without a loop I would do the following test:
assertTable id=ctl_MainPlaceLog.1.0 071-01
assertTable id=ctl_MainPlaceLog.2.0 071-01
assertTable id=ctl_MainPlaceLog.3.0 071-01
assertTable id=ctl_MainPlaceLog.4.0 071-01
etc...
As you can see, the row # of the IDs increase as you move down the table. Is there a way to run a loop which will check the same ID of the table but in each iteration will increase the row # WITHIN the ID? This way I can just run down the table in loop, each iteration only changing the # of the row WITHIN the same element ID.
Thank you.
Ilya
I think the following code will help you do your job
<tr>
<td>store</td>
<td>1</td>
<td>i</td>
</tr>
<tr>
<td>storeElementPresent</td>
<td>id=ctl_MainPlaceLog.${i}.0</td>
<td>present</td>
</tr>
<tr>
<td>while</td>
<td>${present}==true</td>
<td></td>
</tr>
<tr>
<td>assertText</td>
<td>ctl_MainPlaceLog.${i}.0</td>
<td>071-01</td>
</tr>
<tr>
<td>storeEval</td>
<td>${i}+1</td>
<td>i</td>
</tr>
<tr>
<td>storeElementPresent</td>
<td>id=ctl_MainPlaceLog.${i}.0</td>
<td>present</td>
</tr>
<tr>
<td>endWhile</td>
<td></td>
<td></td>
</tr>