i am trying to filter my table data based on the input text, but some how it's not working. Kindly help please.
<div class="panel panel-default">
<div class="panel-heading">search
<input type="text" ng-model="search_text">
Searching for :: {{search_text}}
</div>
<Table>
<table class="table table-hover table-bordered">
<tr>
<td>Item ID</td>
<td>Quantity</td>
</tr>
<tr ng-repeat="item in items | filter:search_text">
<td>{{item.item[0] }}</td>
<td>{{item.item[1] }}</td>
</tr>
</table>
</div>
Please check for the version your angularjs you are using or any errors in console.
Your code seems to work and is correct indeed.
//array of items containing itemID and its quantity
$scope.items = [{
item:['chair',45]
},
{
item:['bed',23]
},
{
item:['laptop',8]
}]
Here's the working plunkr
The table data is indeed filtering with respect to value you enter in textbox
Since Angular 1.1.3 you can use:
<tr ng-repeat="item in items | filter:{item[0]: search_text}">
This will compare it to the object property item[0] in your object.
If you want the exact match, you can set the filtering to true by adding:
<tr ng-repeat="item in items | filter:{item[0]: search_text}:true">
Related
I am trying to iterate array using ng-repeat, but not getting proper output.
<table>
<tr>
<th>Index</th>
<th>Items</th>
</tr>
<tr ng-repeat="li in list">
<td ng-repeat="(key,value) in li">{{key}}</td>
<td ng-repeat="(key,value) in li">{{value}}</td>
</tr>
</table>
$scope.list = [
{"foo": ["item1", "item2"]},
{"bar": ["item1", "item2"]}
];
Expected output:
Index Items
foo item1
foo item2
bar item1
bar item2
Actual output:
Index Items
foo ["item1","item2"]
bar ["item1","item2"]
Anyone help me out to print the exact key,value of list.
You could create an custom filter or function that will simplify the result. That will also get rid of nested ng-repeat's
$scope.simplyfiedList = [];
$scope.list.forEach(function(item){
Object.keys(item).map(function(key){
item[key].map(function(i){
$scope.simplyfiedList.push({key: key, value: i});
})
})
});
Html
<table class="table table-responsive">
<tr>
<th>Index</th>
<th>Items</th>
</tr>
<tr ng-repeat="item in simplyfiedList">
<td>{{item.key}}</td>
<td>{{item.value}}</td>
</tr>
</table>
Demo Plunker
Given the structure of your data you'd probably have to do something like this.
<div ng-repeat="li in list">
<div ng-repeat="(key, itemArray) in li">
<tr ng-repeat="item in itemArray">
<td>{{key}}</td>
<td>{{item}}</td>
</tr>
</div>
</div>
I didn't test it and also I wouldnt recommend it. I'd rather write a function that flattens the data.
myCtrl.Data.summary.account
if i print above model i get the output like below
["1","2","3","4","5"]
i want to use ng-repeat on this value, how to achive this?
I tried following code snippet using ng-repeat but it's not printing anything
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
What mistake i made here? can anyone please point out this issue. How to fix this?
it is ng-repeat not ng-repet
<td ng-repeat="data in myCtrl.Data.summary.account">
<tr>{{data}}</tr>
</td>
1) Use ng-repeat instead of ng-repet
2) If you are using controllerAs syntax check if myCtrl is correct controller name in controllerAs value
3) If you are using $scope then you should create $scope.myCtrl.Data.summary.account in controller
You should place the value in the columns and repeat for the rows. Your code should be in this format:
<tr ng-repeat="data in myCtrl.Data.summary.account">
<td>{{data}}</td>
</tr>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.arr = ["1","2","3","4","5"]
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<table>
<tr>
<td ng-repeat="data in arr">
<table>
<tr>
<td >{{data}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
cant use directly <tr>inside <td> . you need to create a table and add it there
<td ng-repeat="data in myCtrl.Data.summary.account">
<table>
<tr>
<td>{{data}}
</td>
</tr>
</table>
</td>
I have a directive that host a template that takes in a JSON (that contain some data for building a table, and some method to manipulate the data) and generate a table.
relevant code in the template:
<table class="table" id="table_{{table.name}}">
<thead>
<tr>
<th ng-repeat="header in table.headers track by $index">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.rows track by $index">
<td ng-repeat="item in row track by $index"
ng-Click="table.selectedRow(row)">
{{item}}
</td>
</tr>
</tbody>
</table>
an example of a json being fed into this template
$scope.searchTable = {
headers: ["title", "deleted"],
rows: [ ["ABC", true],
["DEF", false] ],
[...]
}
My question is:
sometimes the table require a column with checkboxs, depending on the data. Is there any way to change my template so that when necessary it will generate a column of checkbox instead of just string?
For example: For the JSON example above, let's say I want the column of deleted to be checkboxes. So if an entry is deleted that row will have a unchecked checkbox under the deleted column.
Does this make any sense? Everything is generated dynamic, so I have no idea which column will be checkboxes. It all depends on the data the page gets from the server. So in the example: the server will tell client which entry is readable, then I will generate that JSON and feed it to the template. How should I structure my JSON and the template
Is this even doable? Any tips?
<tr ng-repeat="row in table.rows track by $index">
<td ng-repeat="item in row track by $index">
<div data-ng-if="item.type!=='checkbox'" ng-Click="table.selectedRow(row)"></div>
<div data-ng-if="item.type==='checkbox'"> <input type="checkbox" /></div>
{{item}}
</td>
</tr>
I have created a dynamic table using ngtable , and table data for 3 columns is fetched from json.In that table for 4th column a green/red color circle should come based on connection if successful or not.
The same i have done with javascript(without using json) in which for that 4th column i have set the four different id's,and based on id's i have changed the color using ajax if connection is successful.
In angular using json i m unable to do so , I have created the dynamic table but how to set id's and from where to get the image i'm unable to do.Can anyone help on this.
<table ng-table>
<thead>
<tr>
<th>Feature</th>
<th>DaysUp</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
</tbody>
</table>
You can use scope id and index value to generate unique id. As ng-repeat creates child scope so you will get one scope id(unique id of scope) that id you can attach with $index.
<tr ng-repeat="user in users" id="{{$parent.$id+'-'+$index}}">
<td>{{user.name}}</td>
<td>{{user.status}}</td>
</tr>
JSFiddle Demo
HTML:
<div ng-app="myapp" ng-controller="myctrl">
<table>
<thead>
<tr>
<td>Name</td>
<td>DaysUp</td>
<td>Status</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.daysup}}</td>
<td><img width="20px" height="20px" ng-src="{{imageurls[user.status-1]}}" /> </td>
</tr>
</tbody>
</table>
</div>
SCript:
angular.module('myapp',[])
.controller('myctrl',function($scope){
$scope.users =[
{'name':'xyz','daysup':2,'status':1},
{'name':'abc','daysup':4,'status':2},
{'name':'klm','daysup':6,'status':3},
{'name':'yrt','daysup':9,'status':4}
];
$scope.imageurls = [
'http://www.wpclipart.com/blanks/buttons/glossy_buttons/glossy_button_blank_yellow_circle.png',
'http://pix.iemoji.com/sbemojix2/0702.png',
'http://clker.com/cliparts/u/g/F/R/X/9/green-circle-md.png',
'http://pix.iemoji.com/sbemojix2/0701.png'
];
});
Plunker Demo
The JSON I'm passing into my view has objects and arrays inside of it. Example:
{ name: "test", projects: [ { name: "project1", tasks: "task1" } ] }
Using ng-repeat, I can say (key, value) in items and am given what you'd expect, each key and the stringified version of the object or array.
Is there a 'best practice' for iterating over the objects and arrays inside an ng-repeat?
Just following up with an answer, as I was able to figure this out. It was simpler than I realized. Just used another ng-repeat for items that were arrays.
<div class="container" ng-repeat="item in items">
<table class="table table-striped table-bordered table-condensed">
<tr>
<th class="span3">name</th>
<td>{{ item.name }}</td>
</tr>
<tr>
<th class="span3">accounts</th>
<td>
<ul ng-repeat="account in item.accounts">
<li>username: {{ account.username }}</li>
<li>password: {{ account.password }}</li>
</ul>
</td>
</tr>
</table>