So I am getting some dynamic data and am able to get it to display, but I now want to add some pagination, I have seen that there are modules that can do this but with my limited experience with Angular I haven't been able to get one to work. Below is my table in my HTML, and basically in my Javascript I am running a REST POST call that returns the data and display it in the table below, however if I wanted to use pagination instead of displaying the whole table, how would I do so, I'm not trying to do anything fancy but I have tried some Jquery plugins in addition to the angularjs modules have not figured it out, I thought there may be a way to do this with a simple table like shown below, if anyone has any advice I'd appreciate it.
<table class="table table-striped">
<tr>
<th><b>ID</b></th>
<th><b>Score</b></th>
<th><b>Number</b></th>
</tr>
<tr ng-repeat="data in restCtrl.results">
<td>{{ data.id }}</td>
<td>{{ data.score }}</td>
<td>{{ data.number }}</td>
</tr>
</table>
You can have use ng-repeat="data in restCtrl.results | filter : paginate" with $resource:
http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview
Related
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 :)
Let's say I'm populating a table with a collection. Since I'm just displaying text I don't need Angular to put watches on everything I populate the table with and I use bind once. What happens when I update my collection by adding/removing elements? Does bind once prevent angular from evaluating newly added elements? Are there any pitfalls I need to be aware of?
Example: Will isDeleteable be evaluated for newly added elements?
<table>
<tr ng-repeat="myElement in myCollection">
<td>{{ ::myElement.Title }}</td>
<td>{{ ::myElement.UploadedDate }}</td>
<td ng-if="::isDeleteable(myElement)"><button type="button" ng-click="deleteElement(myElement)">Delete</button></td>
</tr>
</table>
It will work fine, angular will always watch myCollection.
And what you've done is a good practice :)
How to assign value to custom attribute in angularjs as in code below.
<tr ng-repeat="log in logs">
<td>{{ $index }}</td>
<td>{{ log.level }}</td>
<td>{{ log.time | date:"MM/dd/yyyy 'at' h:mma"}}</td>
<td>{{ srcFormatter(log.src.file, log.src.line) }}</td>
<td><json-formatter json="{{log.msg}}" open="1"></json-formatter></td>
</tr>
log.msg is containing json string which I need to assign to json attribute.
This is my first day working with angularjs, so please bear with me.
I have got the answer from author of json-formatter. The solution is to use "msg.log" as the attribute value.
Can you show us the logs object?
I checked the json-formatter directive and expecting a json like json="{my: 'json'}"
Check the documentation
and last thing, standard attr assign like value="{{log.msg}}" It means your example is correct but I think problem is your object.
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 have a page wherein I display a list of items in a table. There is a field named 'Details', after clicking which goes to the view displaying details of the particular item. Values being displayed on 'details.html' are correct, but I am using a static value of the item. I want to get the id of the clicked item so as to display its details. Both the html pages in views are having two different controllers, which I don't want to merge. So, how can I pass the values from one controller to another on the fly? Kindly Help!
<table class="table table-hover">
<tr>
<th>DOCTOR</th>
<th>SPECIALITY</th>
<th>CITY</th>
<th>CLASS</th>
</tr>
<tr ng-repeat="doc in doctors">
<td>{{ doc.contactName }}</td>
<td>{{ doc.speciality }}</td>
<td>{{ doc.townName }}</td>
<td>{{ doc.class }}</td>
<td>></td>
</tr>
for this I use controller MenuCtrl. On click this should go to next page which uses PrecallCtrl. I want to display following thing on it.
<h2>{{contactid}}</h2>
getting contactid id is enough for me right now. rest is working.
You can use $routeParams for this. What you need to do is while defining your route for detail page add a named group argument such as
$routeProvider.when ('/details/:contactId', configObject).
When you now navigate to the details view the url that you should build should look like #/details/24.
On the details controller use the $routeParams collection to retrieve the contactId using $routeParams.contactId