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
Related
I wanted to display a value in a row in ng-repeat based on the value from the database. i wanted to do some thing like this displayed below
I wanted to display if value T for TRAINER and M for MANAGER. could you give me a simple and efficient way to do it.
I think it is easy if you are used ng-if
<tr ng-repeat="item in list">
<td>{{ item.number }}</td>
<td ng-if="{{item.Role}} == 'TRAINER'">T</td>
<td ng-if="{{item.Role}} == 'MANAGER'">M</td>
</tr>
code not tested. just scratch to get an idea...
You can use ternaries in {{ }}
<tr ng-repeat="data in datas">
<td>{{ data.number }}</td>
<td>{{ data.value == 'T' ? 'TRAINER' : (data.value == 'M' ? 'MANAGER' : data.value) }}</td>
</tr>
Is it possible to save the orderBy so that if a user sorts the data then refreshes the page, the last sort (column and ascending/descending) is still apparent?
Here is my view.
<table>
<tr class="sortheaders">
<th class="small"> </th>
<th class="medium">Name</th>
<th class="medium">Age</th>
</tr>
<tr ng-repeat="result in results | orderBy:predicate:reverse">
<td>{{$index+1}}</td>
<td>{{ result.name }}</td>
<td>{{ result.age }}</td>
</tr>
</table>
The simplest way to save data over a refresh would be by saving cookies in the user's browser. You can inject an ngCookies module. Read more about cookies and how to use the module here.
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>
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.