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
Related
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?
While Using ng-repeat , I need to print only 5 in a row
I have tried as shown below
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<br ng-if="($n+1)%5==0">
</div>
</div>
But all the rows are getting printed in a single row
http://jsfiddle.net/9fR23/474/
You could have it like this:
<div ng-repeat="n in names" style="display: inline">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-show="($index + 1) % 5 === 0">
<br>
</div>
</div>
working fiddle
<div ng-app = "myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>
<br ng-if="($index+1)%5==0">
</div>
</div>
Instead of break you can use <p></p> also
Try this
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.angularjs.org/1.1.4/angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil1", "Tobias2", "Linus3","Emil4", "Tobias5", "Linus6","Emil7", "Tobias8", "Linus9","Emil10", "Tobias11", "Linus12","Emil13", "Tobias", "Linus"];
$scope.selectedNames = [];
$scope.select = function(name) {
var index = $scope.selectedNames.indexOf(name);
if(index < 0)
$scope.selectedNames.push(name);
else
$scope.selectedNames.splice(index, 1);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<p ng-show="($index+1)%5==0"></p>
</div>
</div>
</body>
</html>
That's decause your divs width are default 100%. Try to use bootstrap grid system instead:
<div ng-app="myApp" ng-controller="myCtrl" class="row">
<div ng-repeat="n in names" class="col-xs-2">
<input type="checkbox" ng-click="select(n)"/>{{n}}
</div>
</div>
http://jsfiddle.net/f4yb539x/
Although you cannot split a row to 5 equal columns directly, only with a workaround with col offsets.
Try this
<div ng-app="myApp" ng-controller="myCtrl">
<span ng-repeat="n in names">
<input type="checkbox" ng-click="select(n)"/>{{n}}
<div ng-if="($index+1)%5==0"><br></div>
</span>
</div>
I'm trying to create a function where I build a column from an array that list products. Then a second column that contains a select list of options I want to pair the second column with.
The end result will be an ajax call to a server that will insert each matched pair.
I created an example on JS Fiddl: https://jsfiddle.net/wnzj6wda/2/
Here is the code:
<html>
<header>
<title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
<div class="col-md-10 col-md-offset-1">
<div>
<form>
<table class="table table-striped">
<thead>
<th>From File</th>
<th>Map To</th>
</thead>
<tr class="selector-row" ng-repeat="(key,value) in List1">
<td><span id="myspan">{{value}}</span>
</td>
<td style="padding:10px;">
<select name="repeatSelect" id="repeatSelect" ng-model="data" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<button ng-click="SubmitMatched()">Show matched</button>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
<script>
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function($scope) {
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
$scope.SubmitMatched = function() {
//I want to be able to submit results to be added to a database, where I can pass the coloms that match to the selected.
//Example:
// results = [{'product1':'match4','product2':'match5','product3':'match1','product4':'match3','product5':'match2'}]
}
}])
</script>
</html>
Here is the updated demo https://jsfiddle.net/wnzj6wda/3/
You have to make ng-model dynamic so that finally you will get that object with data as
in js
$scope.data ={};
in html
<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
Hope this will help you
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'm just beginning to explore AngularJS. I recently watched a tutorial explaining how to set up a basic filter. I'm now attempting to expand on that concept. I feel like the way that I'm approaching this is very inefficient.
The method used here requires that a new Ctrl be set up for each new data set. If you had 5 different data sets that you wanted to set filters for, it would require 5 different controllers. When I look at my example below, I see a lot of repeated code which makes me thing that this can be done differently.
Here's a working jsfiddle: http://jsfiddle.net/smithd/eUZ7q/1/
<div ng-app="searchApp">
<div ng-controller="FilterCtrl" class="filter">
<h1>Search Demo</h1>
<hr/>
<div ng-switch on="selection">
<!-- <div ng-switch-default>default</div> -->
<div ng-switch-when="avengers">
<div ng-controller="AvengersCtrl">
<input type="text" ng-model="search">
<table ng-show="(filteredData = (avengers.cast | filter:search)) && search && search.length >= 1">
<tr ng-repeat="actor in avengers.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
<div ng-switch-when="expendables">
<div ng-controller="ExpendablesCtrl">
<input type="text" ng-model="search">
<table ng-show="(filteredData = (expendables.cast | filter:search)) && search && search.length >= 1">
<tr ng-repeat="actor in expendables.cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
<select ng-model="selection" ng-options="item for item in items" class="filter"></select>
</div>
</div>
</div>
Here's example using one controller for everything and storing the data in a service.
<div ng-controller="FilterCtrl">
<h1>Search Demo</h1>
<hr/>
<select ng-model="selection" ng-options="item for item in items" class="filter"></select> <hr/>
<div>
<input type="text" ng-model="search">
<table ng-show="(filteredData = (cast | filter:search)) && search && search.length >= 1">
<tr ng-repeat="actor in cast | filter:search">
<td>{{actor.name}}</td>
<td>{{actor.character}}</td>
</tr>
</table>
</div>
</div>
var app = angular.module('plunker', []);
app.factory('DataService', function () {
return { avengers: [...],expendables: [...]}
});
app.controller('FilterCtrl', function($scope,DataService){
$scope.items = ['avengers', 'expendables'];
$scope.selection = $scope.items[0];
/* change data when select changes*/
$scope.$watch('selection',function(){
$scope.cast=DataService[$scope.selection];
})
});
Plunker demo