So I have this
<input type="text" ng-model="search" class="form-control">
And
<tr ng-repeat="city in cities | filter: search">
<td>{{city.description}}</td>
<td>{{(countries | filter : {id:city.idCountry}:true)[0].description}}</td>
</tr>
I have a table and I use the syntax above to display a property (description) which is in a different array of objects (countries), because they have a foreign key relation in the DB. I want to be able to filter by this property (description in countries) existent in this foreign object. I don't know how to accomplish this.
So far I can only filter by properties that are inside the city object.
Example:
city = {
id: 55,
code: "C4589",
description: "NYC",
idCountry: 35
}
country = {
id: 15,
description: "US"
}
The generated HTML is
<input type="text" ng-model="searchF" class="form-control">
<table>
<thead>
<tr>
<th>Description</th>
<th>Code</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="ng-binding">Dallas</td>
<td class="ng-binding">C458</td>
<td class="ng-binding">US</td>
</tr>
<tr>
<td class="ng-binding">NYC</td>
<td class="ng-binding">N4596</td>
<td class="ng-binding">US</td>
</tr>
</tbody>
</table>
Related
How can I click on an HTML row then show the values of the row in input texts to able the user to edit them.
in controller :
$scope.data = [];
$scope.selectedMember = { Code: "", Latin: "", Local: "" }; //new property
$scope.showInEdit = function (member)
{
$scope.selectedMember = member;
}
in ng-repeat :
<table border="1" ng-hide="Hide">
<thead>
<tr>
<th>Code</th>
<th>Latin Description</th>
<th>Local Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local track by $index">
<td>{{c.Staff_Type_Code}}</td>
<td>{{c.L_Desc}}</td>
<td>{{c.A_Desc}}</td>
<!--<td><input type="button" value="Edit" ng-click="Edit(c)"/> </td>-->
</tr>
</tbody>
</table>
In HTML :
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Thanks lot
You just need to update your scope variables in function like
$scope.Latin.L_Desc = c.example;
After that you'll see these values in input fields.
If you want to show values in this code
<table>
<tr>
<td>Code</td>
<td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" autofocus ng-model="selectedMember.Code.Staff_Type_Code"></td>
</tr>
<tr>
<td>Latin Description</td>
<td><input type="text" size="35" ng-model="Latin.L_Desc"></td>
</tr>
<tr>
<td>Local Description</td>
<td><input type="text" size="35" ng-model="Local.A_Desc"></td>
</tr>
Then your object must be like this :
$scope.selectedMember = { Code: "", Latin: {A_Desc:""}, Local: {L_Desc:""} };
And in controller function
$scope.showInEdit = function (member)
{
$scope.selectedMember.Latin.L_Desc = member;
}
I'm trying to generate a table using angularjs. The code is as follows
Code:
<table>
<thead>
<tr>
<th>Column Name1</th>
<th>Column Name2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in Items">
<th>{{Items[$index].Age}}</th>
<th>{{Items[$index].School}}</th>
</tr>
</tbody>
</table>
Here what I want to do is that, when age and school data is generated in the table, they should go under a person's name and that name should appear in the column. How can I do this?
If I have an $scope array as follows;
$scope.Items = [{Name:Jhon,Age:23, School: 'some school'}....];
I want the colum name to be Jhon and Below that I want the other 2 data
You are repeating through the array of Items where each object (in your case 'item') have a Age and School property for example:
var Items = [{Age:23, School: 'some school'}....];
this part is wrong:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{Items[$index].Age}}
</th>
<th>
{{Items[$index].School}}
</th>
</tbody>
it should be:
<tbody>
<tr ng-repeat="item in Items">
<th>
{{item.Age}}
</th>
<th>
{{item.School}}
</th>
</tbody>
Look at the snippet below, that illustrates how to achieve the Age and School under the Name:
<tr ng-repeat="item in Items">
<td>
<table>
<thead>
<tr>
<th colspan="2">{{item.Name}}</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><i>Age:</i> {{item.Age}}</td>
<td align="center"><i>School:</i> {{item.School}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
Watch the demo here.
var dataList = [{Id:1,Name: "xyz",Select: true},
{Id:2,Name: "PQR",Select : false }];
var headerList = [{"ID","Name","null"}]
i got this value from server side i can not make any changes in this array list.
My html code is
<table class= "table table-bordered">
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataList">
<td ng-repeat="value in data" ng-if="!$last">
{{value}}
</td>
</tr>
</tbody>
</table>
I don't want to generate "Select" column. code works propely , but when bordered class applies on table one blank column is display i.e "Select"
so that how can i remove this blank column in html DOM ?
You might want to write
<thead>
<tr>
<td ng-if="!$last" ng-repeat="header in headerList">
{{header}}
</td>
</tr>
</thead>
instead of this
<thead>
<tr ng-repeat="header in headerList">
<td ng-if="!$last">
{{header}}
</td>
</tr>
</thead>
I am trying to get the id value from each row in a ng-repeater into an input type="text" to be able to save the sort order of the table. But I don't know how to just extract the id, so I get the full vlaue of the list.
The table looks like this:
<table class="table table-striped">
<thead>
<tr>
<th class="position"></th>
<th>Specification Title</th>
<th>Last modified</th>
<th class="right">Used in</th>
</tr>
</thead>
<tbody ui-sortable="sortableOptions" ng-model="specsList">
<tr ng-repeat="spec in specsList">
<td class="position draggable"></td>
<td>{{spec.title}}</td>
<td>{{spec.lastModified}}</td>
<td class="right color_green"><strong>{{spec.usedIn}}</strong> of 12 products</td>
</tr>
</tbody>
</table>
And the input:
<input type="text" id="tableSortOrder" value="{{specsList}}">
Current value in the input text:
[{"id":"123","title":"Brand","lastModified":"2012-08-14","usedIn":"7"},{"id":"789","title":"Amount","lastModified":"2010-07-22","usedIn":"5"},{"id":"456","title":"ISBN","lastModified":"2010-02-24","usedIn":"2"}]
What I want to achieve:
123, 789, 456
Thanks for any help!
Is this what you want?:
<input type="text" id="tableSortOrder" value="{{ specsList.map(function(item){return item.id;}).join() }}" />
You could do that in a filter too, like this:
<input type="text" id="tableSortOrder" value="{{ specsList | splitIds }}" />
app.filter('splitIds', function() {
return function(ArrayWithIds) {
return ArrayWithIds.map(function(item){return item.id;}).join();
};
});
I've made this jsfiddle so that you can see how it works: http://jsfiddle.net/d5ye9mus/2/
I have a column which is populated based on a value in the JSON. I would like to filter the data based on the value I have displayed based on the value in the JSON. How can I achieve this?
JSON Data:
{
flip: {
image: "image1"
zone: "sing_tel"
},
environment: "development",
location: "sing11",
}
<table>
<thead>
<tr>
<td colspan="6">
<input type="text" class="pull-right input-large global-search" placeholder="Search .." data-ng-model="searchNetwork.$">
</td>
</tr>
<tr>
<th class="input-search">
<input type="text" class="span12" data-ng-model="srchId" data-ng-change="delaySearch('id', srchId)" placeholder="ID .." />
</th>
<th colspan="2" class="input-search">
<input type="text" class="span12" data-ng-model="srchLink" data-ng-change="delaySrch('href', searchLink)" placeholder="Net Link" />
</th>
<th class="input-search">
<input type="text" class="span12" data-ng-model="srchLocation" data-ng-change="delaySearch('loc', srchLocation)" placeholder="Location" />
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="network in networkData | orderBy:predicate:reverse | filter:searchNetwork">
<td>{{network.id}}</td>
<td>{{network.location}}</td>
<td>{{network.privacy}}</td>
</tr>
</tbody>
</table>
Flip element in the above JSON is received only for some nodes to which I display the value as FlipMe in my UI. I would like to filter my data based on this column.