I have a table in node.js
<%for(var i=0;i<listImages.length;i++){ %>
<tr>
<td><%=listImages[i].id%></td>
<td><%=listImages[i].imagename%></td>
</tr>
<% } %>
How can I apply filtering from the Angularjs tables to such a table?
<tr ng-repeat="items in listImages |filter:searchText">
<td>{{items.id}}</td>
</tr>
<div class="container">
<div class="row">
<input type="text" ng-model="searchText" />
</div>
</div>
Two questions: how can I organize a cycle in the Angular style (if it is necessary for the filter to work), and how can I make the filter work?
Related
I am new to front end programming so hoping to get some guidance. I am developing an application using HTML AngularJs which uses ng-repeat and ng-model and populates multiple rows based on the data in the database for a user. Each row has static data coming from DB (returned as object via restAPI) and dynamic select option for user selection. Select option is hardcoded in app.js and linked to model on HTML for DB update upon selection using update button. Issue is when I select any value from list in one row, this is reflected in the select option on other row. Each row has its own button and i can see update function is working at row level.
Below is HTML and js files
<body>
<h1 align="center">User Tracker</h1>
<div ng-controller="MainController as main">
<div>
<p>Please Enter ID </p>
<p>
<input type="text" ng-model="main.model.userName"></input>
<button ng-click="main.model.getOrgList()">List Org List</button>
</p>
</div>
<hr ng-show="main.model.formSubmitted"></hr>
<div>
<table class="table table-bordered" border="1" ng-show="main.model.formSubmitted">
<thead>
<tr>
<th>ID</th>
<th>User Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="org in main.model.orgList" id="{{org.id}}">
<td>{{org.id}}</td>
<td align="center">{{org.user}}</td>
<td align="center">
<select ng-model="main.model.selectedRecord.appCurrentStateSelected ">
<option ng-repeat=" option in main.model.appCurrentStateList " value ="{{option.value}}" id="{{option.id}}"> {{option.name}} </option>
</select>
</td>
<td>
<button ng-click="main.model.updateAppDetailsList({id:org.id,userName:org.name,appCrntState:main.model.selectedRecord.appCurrentStateSelected})">Update</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Full HTML and JS file is here - https://jsfiddle.net/4jbtL0cj/
You are updating the same object which you have set as ng-model for each row (appCurrentStateSelected). This will update the same object and hence affect all rows as the same is set as ng-model for all rows. The ng-model should be an array or array of objects and then it should be set to array[$index], so that the ng-model is seperate for each row ($index is the index of ng-repeat). This is demonstrated in below plunker. You can do the same changes to your code.
http://plnkr.co/edit/FdWJyzNfbISa9NKFsCqt?p=preview
<td><select ng-model="selected[$index]" ><option ng-repeat="d in dropd" value="{{d.value}}" id="{{d.id}}">{{d.name}}</option></select></td>
I'm getting list of data from Db to a view using ng-repeat. In order to select multiple values at once I'm using checklist-model. My code is as follows,
<div ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>
This will return a long list one below another. What I need is to get these data in the list to be displayed in 4 columns. Any help please!
This was my previous question. For the answer for this I got this
<table>
<tr>
<td ng-repeat="item in items">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</td>
</tr>
</table>
and this
<div ng-repeat="item in items" style="display:inline-block;">
<input type=checkbox checklist-model="user.role" checklist-value="item"/>{{item}}
</div>
These codes make sure that the data are in a same row. But what I want is to add values into 4 separate columns. If there are 1000 data I need 200 data to be in one column, 200 in the second and so on. Please not that I'm using checklist-model
Hi Please try this and use logic
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.index = 0;
$scope.items =["str1", "str2", "str3","str4","str5","str6","str7","str8","str9","str10"];
$scope.array = [];
for(var i=0; i<$scope.items.length/5;i++)
$scope.array.push(i);
});
<html>
<head>
<title>My Angular App!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<table>
<tr>
<td>Col1</td>
<td>Col2</td>
<td>Col3</td>
<td>Col4</td>
<td>Col5</td>
</tr>
<tr ng-repeat="i in array" ng-init="index = i*5">
<td ng-repeat="one in items.slice(index,index+5)">{{one}}</td>
</tr>
</table>
</div>
</body>
</html>
<div ng-repeat="product in products" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index]}}</div>
<div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+1]}}</div>
<div class="col-xs-4"> <input type="checkbox" checklist-model="user.role" checklist-value="{{products[$index]}}"/>{{products[$index+2]}}</div>
</div>
This did the trick. Thanks to #KhalidHussain
I have a table. Each cell can hold its value as a string or the edit in place template for that datatype.
I render one thing or the other based on the value of the variable "ttt" of that table cell. If ttt=true it renders the editing template if false it renders the value as string.
The way things are set up you can toggle between true and false of a specific cell each time you double-click on it.
I wish to have as well a button at top of the page that toggles all the "ttt" variables between true or false at the same time for all the table cells.
What is the best way to do this the way I have things set up.
Here is the template of the table:
<script type="text/ng-template" id="editabletable">
<div ng-controller="listeditorController" cg-busy="{promise:myPromise, message:' '}">
<div tasty-table bind-resource-callback="getResource" bind-init="init" bind-filters="filterBy">
<div class="table-responsive" style="width:100%;">
<table class="superResponsive" adapt-table style="width:{{theWidth}};margin:0 auto;">
<thead>
<!-- <thead tasty-thead bind-not-sort-by="notSortBy"></thead> -->
<tr>
<th style="max-width:{{columnWidth}}px;" ng-repeat="attobj in rows[0].class_attributes()">
{{ attobj.label }}
</th>
</tr>
<tr>
<td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns track by $index">
<input ng-if="attobj.filterable" type="text" class="form-control input-sm" ng-model="filterBy[attobj.filterkey || attobj.key]" ng-model-options="{ debounce: 2000 }" />
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="dbo in rows">
<td style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">
<div>
<form name="theForm" novalidate>
<div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
<div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
<p ng-if="v.cid">{{ v.displayName() }}</p>
<p ng-if="!v.cid">{{ v }}</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div tasty-pagination bind-list-items-per-page="listItemsPerPage" bind-items-per-page="itemsPerPage" bind-template-url="'/templates/table/pagination.html'"></div>
</div>
</div>
</script>
Ok, the solution I came up with is fairly simple but SLOW.
I added a controller at the table level which defines a scope variable "editGird" defined on load as "false".
On click of the button "Edit gird" the scope variable "editGird" toggles between true and false.
If set to true the cell is rendered like:
<td ng-if="editGird==true" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns">
<div>
<form name="theForm" novalidate>
<div ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
</div>
</td>
If editGird == false:
<td ng-if="editGird==false" style="max-width:{{columnWidth}}px;" ng-repeat="attobj in header.columns" ng-dblclick="ttt=!ttt">
<div>
<form name="theForm" novalidate>
<div ng-if="ttt" ng-init="attobj = attobj.attobj" ng-include src="getAttValuesEditorTemplate(dbo, attobj)">
</div>
</form>
<div ng-if="!ttt" ng-repeat="v in dbo.get4(attobj.key) track by $index">
<p ng-if="v.cid">{{ v.displayName() }}</p>
<p ng-if="!v.cid">{{ v }}</p>
</div>
</div>
</td>
Controller:
app.controller('editGirdController', ['$scope',
function ($scope) {
$scope.editGird= false;
$scope.onOff = function() {
if ($scope.editGird == true){
$scope.editGird = false;
$scope.editGirdColor ='#0887A7';
} else{
$scope.editGird = true;
$scope.editGirdColor ='lightGreen';
}
console.log($scope.editGird);
console.log($scope);
}
}
]);
But this is very very slow!!!
On tables which have 25-35 columns it takes 1 second for each 5 rows to render!!!
How can I make this more efficient???
I have a directive which will create bootstrap columns dynamically . The problem is directive columns width is not equal to the statically creating bootstrap columns.
E.g
<my-directive></my-directive>
<div class="row">
<div style="background:green" class="col-md-4 col-sm-4">
</div>
<div style="background:green" class="col-md-4 col-sm-4">
</div>
<div style="background:green" class="col-md-4 col-sm-4">
</div>
</div>
mydirectiveview.html
div class="row">
<div style="background:red" ng-repeat="tile in Tiles" ng-init="colsspan=12/configInfo.Tiles.length" class="col-sm-{{colsspan}} col-xs-12 col-md-{{colsspan}}>
</div>
</div>
My problem is width of the directives div is not equal when compare to the div created in static so that the div as not aligned properly
Can anyone help me in this ??
I want both the directive div and div created in html file should be in same size and aligned properly.
Hi I can't see your directive code, nut mayby
there is something wrong
> ng-repeat="tile in Tiles"
>
> ng-init="colsspan=12/configInfo.Tiles.length"
once you've got Titles and after that is configIngo.Titles
please see here for working solution
http://plnkr.co/edit/QoPL5xydTXoX17tV1XZd?p=preview
Row class does not behave like table. It will adjust its height and width automatically. i will recommend you to use Table for a smooth layout.
<table class="table table-bordered ">
<thead>
<tr>
<th>h1</th>
<th>h2</th>
<th>h3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="grid in gridData">
<td>{{grid.h1}}</td>
<td>{{grid.h2}}</td>
<td>{{grid.h3}}</td>
</tr>
</tbody>
</table>
I have created a table from 2 different arrays in AngularJS that contain employees name and services and rest of the cells contain Checkboxes now I want get the ID's of selected Checkboxes that I have created another array in the controller,
but the view allows me to select only one Checkbox from many in the row
here is my Html
<form ng-submit="save()">
<table border="1">
<tr>
<td><strong>Services</strong></td>
<td ng-repeat="e in PBA">{{e.Name}}</td>
</td>
<tr ng-repeat="(index,i) in SOB">
<td>{{i.Name}}</td>
<td ng-repeat="e in PBA track by $index">
<input type="checkbox" name="cb" ng-true-value="{{e.Id}}_{{i.Id}}" ng-model="ids[index]" />
</td>
</tr>
</table>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" />
</div>
</form>