Using angular js on click of text, text should be editable. Currently not working. Used this library. Following code is in view page.
JS:
var app = angular.module('virVenturesAPP', ['angularUtils.directives.dirPagination','720kb.datepicker','xeditable']);//'720kb.datepicker'
var site_url = 'http://localhost/vv/';
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
HTML:
<table id="table_id" class="table table-striped table-hover table-bordered" ng-show="numberLoad">
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td ng-if="rrd.order_id==='' "> <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
I removed the following code:
ng-show="numberLoad" line 2
ng-if="rrd.order_id==='' " line 18
['angularUtils.directives.dirPagination','720kb.datepicker'] I think this line of code is the real problem
and it works:
jsfiddle
try to investigate better
<div ng-app="virVenturesAPP" ng-controller="Ctrl">
<table id="table_id" class="table table-striped table-hover table-bordered" >
<thead>
<tr>
<th>#</th>
<th>RRD Track No</th>
<th>Order Primary Key</th>
<th>Order Id</th>
<th>Mapped Date</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="rrd in getRrdList | itemsPerPage:rrdinfo.itemsPerPage" current-page="rrdinfo.currentPage" total-items="total_count">
<td>{{rrd.id}}</td>
<td>{{rrd.rrd_track_no}}</td>
<td >{{rrd.ord_primary_key}}</td>
<!-- <td editable-text="rrd.order_id" ng-if="rrd.order_id==='' "> <p contenteditable="true"> enter order</p></td>-->
<td > <a data-title="Enter username" editable-text="rrd.order_id" data-pk="1" data-type="text" id="usernameaa" href="#" class="editable editable-click edit_text" data-original-title="" title="">enter order id</a></td>
<td ng-if="rrd.order_id!=='' ">{{rrd.order_id}}</td>
<td>{{rrd.mapped_date}}</td>
</tr>
</tbody>
</table>
</div>
//script
var app = angular.module('virVenturesAPP', ['xeditable']);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.rrd = {
order_id: 'awesome user'
};
});
I have an API which return me a JSON array:
{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}
How can I make a table in angular, so the data is displayed correctly?
Currently I have this:
My html code is:
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results}}</td>
</tr>
</tbody>
</table>
Can you help me fix the last column, so instead of displaying all the values in one row, make it display it into different rows?
I believe this might be closer to what Angel Silva is after.
HTML:
<body ng-controller="MainCtrl">
<table class="table table-striped">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody ng-repeat="x in data">
<tr ng-repeat="r in x.results">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{r}}</td>
</tr>
</tbody>
</table>
</body>
JavaScript/AngularJS:
app.controller('MainCtrl', function($scope) {
$scope.data = [{"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]}];
});
Here's a link to a working Plunker, http://plnkr.co/edit/NrnFI17P932KckzXRcF4?p=preview
Use a second ng-repeat within an <ul> (unordered list):
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>
<ul>
<li ng-repeat="r in x.results">
{{ r }}
</li>
</ul>
</td>
</tr>
</tbody>
</table>
You could create an array of columns which could be named as columns. Loop over columns to render td's data with current x
Controller
$scope.data = {"i":11,"j":12,"iterationNumber":9,"results":[12,6,3,10,5,16,8,4,2,1]};
$scope.columns = Object.key($scope.data)
Markup
<tr ng-repeat="x in data">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
You can try array.join() method to join all the elements of an array into a string.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.tableR = true;
$scope.data = [{
"i":11,
"j":12,
"iterationNumber":9,
"results":[12,6,3,10,5,16,8,4,2,1]
}];
});
tr,th,td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<table class="table table-striped " ng-show="tableR">
<thead>
<tr>
<th>i Value</th>
<th>j Value</th>
<th>iternation Number Value</th>
<th>results</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.i}}</td>
<td>{{x.j}}</td>
<td>{{x.iterationNumber}}</td>
<td>{{x.results.join()}}</td>
</tr>
</tbody>
</table>
</div>
I have a table which prints data from a JSON. Every row have an delete option.
I want to print the deleted data into a new table. I have managed to print data in console but unable to add it into view.
Below is the code:
Controller
$scope.deletedItems = [];
var counter = 0
$scope.removeRow = function (idx) {
console.log(idx);
$scope.TTNdata.splice(idx, 1);
var deletedArray = $scope.TTNdata.slice(idx, 1);
//console.log(deletedArray);
$scope.deletedItems.push(deletedArray);
console.log($scope.deletedItems);
counter++;
$('#counter').html(counter);
};
View:
<table id="deleted-rows" class="">
<thead>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</thead>
<tbody>
<tr ng-repeat="item in deletedItems | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{item.id}} </td>
<td>{{item.first_name}}</td>
<td>{{item.last_name}}</td>
<td>{{item.gender}}</td>
<td>{{item.email}}</td>
<td><img src="{{item.photo}}" alt="{{item.first_name}} {{item.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
<table class="table bordered">
<thead>
<tr>
<th>Sr. No</th>
<th>ID</th>
<th>First Name</th>
<th>Second Name</th>
<th>Gender</th>
<th>Email</th>
<th>Image</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in TTNdata | filter:bindtext | orderBy:'id'">
<td>{{$index+1}}</td>
<td>{{data.id}} </td>
<td>{{data.first_name}}</td>
<td>{{data.last_name}}</td>
<td>{{data.gender}}</td>
<td>{{data.email}}</td>
<td><img src="{{data.photo}}" alt="{{data.first_name}} {{data.last_name}} photo"></td>
<td class=""> <span style="cursor:pointer" ng-click="removeRow($index)" title="Remove Record" class="glyphicon glyphicon-remove"></span></td>
</tr>
</tbody>
</table>
Data is printing in console but not in table, every time i click remove it will generate a blank row in deleted table
What I am doing wrong?
Code on github https://github.com/sahilpopli/learningAngular.git
slice returns array, so try $scope.deletedItems.push(deletedArray[0]);
Or try to concatenate the arrays by doing so: $scope.deletedItems = $scope.deletedItems.concat(deletedArray);
A possible thing that you may need to think is that if you going to have paged tables, removing the object from a list with that index could not be a good thing.
My solution to your problem would be this(using the id instead of index). This is just scratch demonstrating a possible way to achieve what is your desire.
Code
angular.module('App', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.List = [{
Id: 1,
Name: 'Name1'
}, {
Id: 2,
Name: 'Name2'
}, {
Id: 3,
Name: 'Name3'
}];
$scope.newList = [];
var remove = function(itemId) {
var indexS = $scope.List.filter(function(item, index) {
return item.Id == itemId;
});
if (indexS.length == 1)
$scope.newList.push($scope.List.splice($scope.List.indexOf(indexS[0]), 1)[0])
};
$scope.removeMe = remove;
}]);
Markup
<body ng-app="App" ng-controller="MyCtrl">
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in List">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
<td ng-click="removeMe(item.Id)">removeme</td>
</tr>
</tbody>
</table>
<table>
<thead>
<th> Id </th>
<th> Name </th>
</thead>
<tbody>
<tr ng-repeat="item in newList">
<td >{{item.Id}}</td>
<td >{{item.Name}}</td>
</tr>
</tbody>
</table>
Plunker
I have two tables in my HTML. I want to take data from one list and pass it to another. I can't do the same ng-repeat call because on the second table I have one individual customer and I just want to display his ID. On the first table, I have all the customers.
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv()">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</b>
</tr>
<td ng-model="id">{{id}}</td>
</table>
</div>
<table border="1" id="userTable">
<tr>
<b>#</b>
</tr>
<tr ng-repeat="user in userList" ng-click="viewUserDiv(user)">
<td ng-model="id">{{user.id}}</td>
</tr>
</table>
$scope.viewUserDiv = function(user) {
if (user) {
$scope.userDiv = true;
$scope.userDivUser = user;
}
}
<div ng-show="userDiv">
<table border="1">
<tr>
<b>#</>
</tr>
<td ng-model="userDivUser">{{userDivUser.id}}</td>
</table>
<div>
I have a list of users for each of my stores [model.stores.users] in JSON object and currently show the number of users against each store by accessing store.users.length
Now I want two extra counts, these counts are just based on the number of users with a simple boolean filter.
Count of Active Users is where user.is_user_active = true
Count of Pending Users is where user.is_user_active = false
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th class="hidden">ID</th>
<th>Name</th>
<th>Users</th>
</tr>
</thead>
<tbody class="tbl-jobs-data" ng-repeat="item in model.stores">
<tr data-toggle="collapse" class="accordion-toggle" data-target="#store_user{{$index}}">
<td class="hidden">{{item.id}}</td>
<td class="">{{item.name}}</td>
<td class="user-count">{{item.users.length}}</td>
</tr>
<tr ng-if="item.users.length > 0">
<td colspan="100" class="hiddenRow">
<div class="accordian-body collapse" id="store_user{{$index}}">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>State</th>
<th>Is Active</th>
<th>Last Login</th>
</tr>
</thead>
<tbody class="tbl-search-data">
<tr ng-repeat="app in item.users">
<td>{{app.id}}</td>
<td>{{app.name}}</td>
<td>{{app.state}}</td>
<td>{{app.is_user_active}}</td>
<td>{{app.last_login}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Just use filter, eg
<td class="active_user_count">
{{ (item.users | filter : { is_user_active: true }).length }}
</td>
<td class="pending_user_count">
{{ (item.users | filter : { is_user_active: false }).length }}
</td>
I hope I've got the syntax right, the Angular docs are down at the moment >:(