Hi I want to display an array [ "text1", "text2", "text3" ] in a grid in angularjs. Here I don't have a field name. How do I do that? and I also need a search in the grid to search items in the column. Grid contains only one column with the list in the array. Sorting should be possible. How do I do it without a field name?
Display the array:
<table>
<tr ng-repeat="field in fields">
<td>{{ field }}</td>
</tr>
</table>
Search the array:
<input type="text" ng-model="search.input">
<table>
<tr ng-repeat="field in fields | filter:search.input">
<td>{{ field }}</td>
</tr>
</table>
Order by:
The most easiest is to order the array using sort by javascript:
$scope.fields.sort();
But you can also do it by using the orderBy filter in combination with the identity function angular provides:
$scope.identity = angular.identity;
<table class="table">
<tr ng-repeat="field in fields | filter:search.input | orderBy:identity">
<td>{{ field }}</td>
</tr>
</table>
Live plunker can be found here.
Related
I started learning AngularJS a few days ago, and I wonder how do I get the name of a field in a JSON file.
{contador: "1159273", Code: "TCP_MISS/200", $$hashKey: "object:12"}
Thats one line of the json file, and I want to get the "contador" and "Code".
My objective is to do a table with that on top.
Here is my HTML code:
<table class="table">
<tr >
<td ng-repeat="(key, name) in $ctrl.logs.data">{{key}}</td>
</tr>
<tr ng-repeat="linha in $ctrl.logs.data">
<td>{{ linha.contador }}</td>
<td>{{ linha.Code }}</td>
</tr>
</table>
The "key" returns 0 1 2 ... and I want to get "contador" and "Code".
It is because your data is an array change this line
<td ng-repeat="(key, name) in $ctrl.logs.data">{{key}}</td>
with the following
<td ng-repeat="(key, name) in $ctrl.logs.data[0]">{{key}}</td>
Demo
I am trying to filter the paginated table data that is populated by ng-repeat as follows
<input type="text" ng-model="searchUser" placeholder="Search" />
<tbody ng-repeat="x in users | filter: searchUser">
<tr>
<td>{{ x.login_id }}</td>
<td>{{ x.first_name }}</td>
<td>{{ x.last_name }}</td>
</tr>
</tbody>
But what's happening is that filter is not applying for the entire data I am loading using ng-repeat, instead it is only working on the list of table contents that are showing on the page 1(as I paginated the table).
How can I apply filtering on entire table data?
This is how I am implementing it http://jsbin.com/patumiyapo/edit?html,js,output
Thanks
I have a navbar on my page that has an input on it that I want to search a view, that should load in index.html after the user types in their search items. I can only figure out how to search with an input if it's in the same page that the table of ng-repeat items is in. Is there a way to search the table outside of the view? I've created a plnkr. It doesn't work. I'm not sure how to make it work. http://plnkr.co/edit/nqChzn5OATNMeSZL7ItJ?p=preview
Here is some of my code:
navbar
<input type="text" class="form-control" placeholder="Search" ng-model="vm.query">
Here is my table where the data displays.
<table ng-if="query" class="table table-hover table-responsive" >
<thead>
<tr>
<th>
({{filteredResults.length}}) Results Found
</th>
</tr>
<tr>
<td>Acc. ID</td>
<td>Acc. Name</td>
<td>Acc Address</td>
<td>City</td>
<td>Zip</td>
<td>Phone</td>
<td>Parent Name</td>
<td>Account Type</td>
<td>Account Status</td>
<td>Credit Term</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="result in vm.results | filter:query as filteredResults">
<td>{{ result.accountId }}</td>
<td>{{ result.accountName }}</td>
<td>{{ result.address }}</td>
<td>{{ result.city }}</td>
<td>{{ result.state }}</td>
<td>{{ reuslt.zip }}</td>
<td>{{ result.phone }}</td>
<td>{{ result.parentName }}</td>
<td>{{ result.accountType }}</td>
<td>{{ result.accountStatus }}</td>
<td>{{ result.accountStatus }}</td>
</tr>
</tbody>
</table>
Is it possible to do what I want to do?
I've looked at your plunker and I don't believe that your code hasn't initialized angular. I can't see an ng-app tag anywhere in your code.
That a side, you will be able to use any input to filter/search (via. various implementations) so long as the input and table are contained with your ng-app and controller parts of the DOM. Otherwise you won't be able to access it the controller.
Can I suggest that you distill your question down? give the smallest amount of code that demonstrates your problem.
here's a rough outline:
<body ng-app="app" ng-controller="cntrl">
<!-- nav bar -->
<div>
<input ng-model="filterVal"/>
</div>
<!-- table -->
<div>
<table>
<tr ng-repeat="r in data.rows | filter:filterVal">....</tr>
</table>
</div>
</body>
Here's a plunker where the default filter functionality is working: http://plnkr.co/edit/GDJs5xTCpqq48SDFTk67
If you need to have your nav bar outside of your app/controller or in an different controller (etc.) then there are solutions to this.
Assuming you are using ui-route, this is how to use a service to communicate between controllers:
functioning example:
http://plnkr.co/edit/fZZLUvlHO9zUFwQYd1an?p=preview
Eggheads video:
https://egghead.io/lessons/angularjs-sharing-data-between-controllers
I'm trying to display a table with activities, with a row displaying the day and after that the list of activities for this day. I also want the user to be able to filter the activities. "myActivities" is a Map with the user's activities assigned to true, and the rest to false. my code looks like this:
<table>
<tbody ng-repeat="date in dates">
<tr><td>{{date.day}}</td></tr>
<tr ng-repeat="activity in date.activities" ng-show="myActivities[activity.id] == true">
<td>{{activity.time}}</td><td>{{activity.name}}</td>
</tr>
</tbody>
</table>
The problem with that is when there is a day with no relevant activities for the user, the row displaying the date is still shown but all the activities under it are hidden.
I successfully solved the problem with this function:
$scope.checkDate = function(activities)
{
activities.forEach(function(activity){
if (myActivities[activity.id] == true) return true;
});
return false;
}
//added the ng-show to the tbody in the html:
<tbody ng-repeat="date in dates" ng-show="checkDate(date.activities)">
It works perfectly, but is this the best solution? I have a feeling that there is a nicer solution.
any ideas ?
Thanks!
You can assign the filtered variables to the date object, and check the length of that property:
<table>
<tbody ng-repeat="date in dates"
ng-show="date.filteredActivities.length">
<tr>
<td>{{ date.day }}</td>
</tr>
<tr ng-repeat="activity in (date.filteredActivities = (date.activities | filter: { active: true }))">
<td>{{ activity.time }}</td>
<td>{{ activity.name }}</td>
</tr>
</tbody>
</table>
I've got a simple repeating table-row in AngularJS
<tr ng-repeat="item in items">
<td>{{ item.prop1 }}</td>
<td>{{ item.prop2 }}</td>
</tr>
My item object has a comment property on it, and if that comment contains a value, I want to display that in a row all by itself on the line right after the rest of the elements and have it span the entire row. Is that type of thing possible? I looked at ng-repeat-end but that doesn't seem to be what I want, and I can't just add and extra <tr> element inside the ng-repeat as that'd be invalid HTML.
You can use ng-repeat's special repeat start and end points via ng-repeat-start and ng-repeat-end.
DEMO
HTML
<table ng-controller="PostController">
<tr ng-repeat-start="post in posts">
<td>{{post.content}}</td>
</tr>
<tr ng-repeat-end ng-repeat="comment in post.comments">
<td>{{comment.content}}</td>
</tr>
</table>
UPDATE: If the comment is a string, then simply remove the ng-repeat at the ng-repeat-end end point and add an ng-if expression that validates the existence of post.comment.
DEMO
HTML
<table ng-controller="PostController">
<tr ng-repeat-start="post in posts">
<td>{{post.content}}</td>
</tr>
<tr ng-repeat-end ng-if="post.comment">
<td>{{post.comment}}</td>
</tr>
</table>