In the following code, when I click on the "Delete All Expired" button, why does it only delete 3 of the 4 customer objects where status=expired?
<html ng-app="mainModule">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainController" style="padding: 20px 0">
<div class="col-lg-4">
<table class="table-striped table-bordered table table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Status</th>
</tr>
<tr ng-repeat="customer in customers| orderBy: 'lastName'">
<td>{{customer.firstName}}</td>
<td>{{customer.lastName}}</td>
<td ng-click="switchStatus(customer)" ng-class="{'text-danger': customer.status == 'expired'}" class="prohibitSelectionClickable">{{customer.status}}</td>
</tr>
</table>
<button ng-click="deleteAllExpired()">Delete all expired</button>
</div>
<script>
var mainModule = angular.module('mainModule', []);
function mainController($scope) {
$scope.customers = [
{id: 1, status: 'expired', firstName: 'Joe', lastName: 'Thompson'},
{id: 2, status: 'expired', firstName: 'Hank', lastName: 'Howards'},
{id: 3, status: 'expired', firstName: 'Clara', lastName: 'Okanda'},
{id: 4, status: 'active', firstName: 'Thomas', lastName: 'Dedans'},
{id: 5, status: 'expired', firstName: 'Zoe', lastName: 'Frappe'}
];
$scope.deleteAllExpired = function () {
angular.forEach($scope.customers, function (customer, index) {
if (customer.status == 'expired') {
$scope.customers.splice(index, 1);
}
});
};
}
</script>
</body>
</html>
Most probably because splice() mutates the array, and angular.forEach() uses invalid indexes. Better implementation IMO:
$scope.deleteAllExpired = function () {
var newCustomers = [];
angular.forEach($scope.customers, function (customer) {
if (customer.status !== 'expired') {
newCustomers.push(customer);
}
});
$scope.customers = newCustomers;
};
You may even get a performance gain, not so many mutations (it will probably be negligible for small datasets though).
It is because the array you iterate changes (due to deleting) during the iterations and will not go through all the items. Change the method to this:
$scope.deleteAllExpired = function () {
var i = $scope.customers.length;
while (i--) {
var customer = $scope.customers[i];
if (customer.status == 'expired') {
$scope.customers.splice(i, 1);
}
}
};
Related
I need to use angular in order to get data from a web endpoint to fill this table. I have a list created with random names, but I need it to filled with data from a link instead. I still need to create the social media links as well.
Either way, can someone show me how to do it keeping in mind that I don't know much about angular at all. thank you.
html:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="folder/main.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<h3>List students</h3>
<div class="container-fluid">
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>
ID
</th>
<th> Name </th>
<th>Social Media </th>
</tr>
</thead>
<tbody>
<tr>
<td>Filter =>></td>
<td> <input type="text" ng-model="search.name" /></td>
<td> <input type="text" ng-model="search.age" /> </td>
<td><input type="text" ng-model="search.gender" /> </td>
</tr>
<tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
<td>
<button class="btn">
Edit
</button>
</td>
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
</div>
</body>
</html>
js:
<script>
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.students = [
{ name: 'Kevin', age: 25, gender: 'boy' },
{ name: 'John', age: 30, gender: 'girl' },
{ name: 'Laura', age: 28, gender: 'girl' },
{ name: 'Joy', age: 15, gender: 'girl' },
{ name: 'Mary', age: 28, gender: 'girl' },
{ name: 'Peter', age: 95, gender: 'boy' },
{ name: 'Bob', age: 50, gender: 'boy' },
{ name: 'Erika', age: 27, gender: 'girl' },
{ name: 'Patrick', age: 40, gender: 'boy' },
{ name: 'Tery', age: 60, gender: 'girl' }
];
$scope.totalItems = $scope.students.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.students.indexOf(value);
return (begin <= index && index < end);
};
});
</script>
the data looks like this:
{"id":"11","name":"A Cooperativa","full_address":"Rua Bar\u00e3o de Viamonte 5, 2400-262 Leiria","location":"Leiria","council":"Leiria","country":"Portugal","lat":"39.7523042","lng":"-8.7825576","type":"various","facebook":"https:\/\/www.facebook.com\/pages\/A-Cooperativa-MerceariaTasca\/1559630810945570","facebook_id":"","gmaps":"https:\/\/www.google.pt\/maps\/place\/R.+Bar%C3%A3o+de+Viamonte+5,+2410+Leiria\/#39.7523042,-8.7825576,17z\/data=!3m1!4b1!4m2!3m1!1s0xd2273a29462db11:0x49a3f9a45cd9eb80","tripadvisor":"http:\/\/www.tripadvisor.com\/Restaurant_Review-g230085-d8154189-Reviews-A_Cooperativa-Leiria_Leiria_District_Central_Portugal.html","zomato":"","website":"","email":"cooperativa.tasca#hotmail.com","telephone":"912635324","active":"1","updated":"2015-08-17 09:01:05"}
I'm not sure if I did get this right, but:
You want to get the students from a web endpoint as json?
Then you would write something like this in angular:
app.controller('myCtrl', function ($scope, $http) {
...
$scope.students = [];
$scope.totalItems = 0;
$http.get('https://www.domain.com/api/resource')
.then(function success(response) {
$scope.students = response.data;
$scope.totalItems = $scope.students.length;
}, function failed(reason) {console.log(reason);})
...
});
But you should use separated files, services etc.
I want to take the value of the filter input, is that possible? I have this table
with that code
<td data-title="'Transaccion'" filter="{id_transaccion: 'text'}" sortable="'id_transaccion'">
<span editable-text="pago.id_transaccion" e-name="id_transaccion" e-form="rowform" e-required="">{{pago.id_transaccion}}</span>
</td>
I have the filter attr, and I tested everything trying to get the value of the field transacction of the filter, but nothing works, anyone knows how to get it?
You can access the filters object with the method filter() of the instance of NgTableParams. If you get your table data with 'getData' instead of 'dataset' (as in the example below), everytime you change a filter value the function 'getData' will be executed and you can access your updated filter object there and make any data manipulation you want. Look at the code of the snippet below:
(function() {
"use strict";
var app = angular.module("myApp", ["ngTable"]);
app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "$filter"];
function demoController(NgTableParams, $filter) {
var self = this;
var simpleList = [{
name: 'ww',
age: 234,
money: 45,
country: 'pan'
}, {
name: 'xx',
age: 24,
money: 55,
country: 'col'
}, {
name: 'yy',
age: 454,
money: 82,
country: 'cr'
}, {
name: 'zz',
age: 345,
money: 34,
country: 'mex'
}];
self.tableParams = new NgTableParams({
// initial filter
filter: {
name: "w"
}
}, {
getData: getData
});
function getData(params) {
/*****************************
* LOOK HERE!!!!!
******************************/
// The filter object
var filterObj = params.filter();
self.ngTableFilters = filterObj;
// Filtering the list using the filter object...
var filteredList = $filter('filter')(simpleList, filterObj);
return filteredList;
}
}
})();
(function() {
"use strict";
angular.module("myApp").run(setRunPhaseDefaults);
setRunPhaseDefaults.$inject = ["ngTableDefaults"];
function setRunPhaseDefaults(ngTableDefaults) {
ngTableDefaults.params.count = 5;
ngTableDefaults.settings.counts = [];
}
})();
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>
<div ng-app="myApp" class="container-fluid">
<div class="row" ng-controller="demoController as demo">
<div class="col-xs-12">
<h3>ngTable directive</h3>
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tr ng-repeat="row in $data">
<td data-title="'Name'" filter="{name: 'text'}">{{row.name}}</td>
<td data-title="'Age'" filter="{age: 'number'}">{{row.age}}</td>
<td data-title="'Money'" filter="{money: 'number'}">{{row.money}}</td>
</tr>
</table>
</div>
<div class="col-xs-12">
<h3>Filters:</h3>
<pre>{{ demo.ngTableFilters | json }}</pre>
</div>
</div>
</div>
I'm using angularjs and have a table which I build from two scope objects. It would be really nice have some kind of functionality where I can add columns by my self. The big problem is that I would like to use the existing values and try to use them in my new column. Is that possible? Or do I have to build up the columns on the server side and then return it?
PLUNKER
<!doctype html>
<html ng-app="plunker">
<head>
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng:controller="MainCtrl">
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked">
{{ row[column.value] }}
</td>
</tr>
</tbody>
</table>
<br><br>
<input type="button" value="Add new column" ng-click="addColumn()" />
<br><br><br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
$scope.addColumn = function() {
var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
$scope.columnsTest.push(newCol);
}
$scope.columnsTest = [{
id: 'Value1',
checked: true,
value: 'Value1'
}, {
id: 'Value2',
checked: true,
value: 'Value2'
}, {
id: 'Value3',
checked: true,
value: 'Value3'
}];
$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];
});
</script>
You can use the $parse service.
Inject $parse into your controller and add a new method:
$scope.getCellValue = function(row, column) {
var getter = $parse(column.value);
return getter(row);
// Alternatively:
// return $parse(column.value)(row);
};
Use it like this:
<tr ng-repeat="row in rows">
<td ng-repeat="column in columnsTest" ng-if="column.checked">
{{ getCellValue(row, column) }}
</td>
</tr>
Demo: http://plnkr.co/edit/DVF2LXeZPqCL1Ik3EyVf?p=preview
Explanation:
The $parse service accepts a string expression to compile and returns a getter function. In your example we use the column.value:
var columnValue = 'Value1 + Value2 + Value3';
var getter = $parse(columnValue);
The returned getter function accepts a context object which the expression should be evaluated against. In your example we use the row object:
var row = { id: 1, "Value1": 911, "Value2": 20, "Value3": 20 };
var result = getter(row);
Basically the $parse service uses the string expression and the context object
and goes:
You want Value1 + Value2 + Value3, and you want to retrieve these values
from the row object.
Illustrated like this:
var result = row['Value1'] + row['Value2'] + row['Value2'];
With a 2D array you could structure your data like this:
$scope.rows = [
[911,20,30], // index 0 of 1st dim = 1st row; index 0,1,2 of 2nd dim = cells
[200,20,30] // index 1 of 1st dim = 2nd row
];
With this you can use two loops to get the cell and do your calculation, first loop for row and second for cell value.
Please have a look at the demo below or this plunkr.
In the demo I've created a function that does the calculation if you'd also pass an array like [0,1] it will tell the function to sum only col0 and col1 values.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
function sumRows(data, values2sum) {
// e.g. data = [ [11, 12, 13], [21, 22, 23] ]
// new col = [ 32, 34, 46] // sum all
// new col = [ 32, 34, 0 ] // sum value1 & 2
// --> values2sum = [ 0, 1 ]
if ( angular.isUndefined(values2sum) ){
var all = true;
var value2sum = [];
}
angular.forEach(data, function(row, rowIndex) {
rowSum = 0;
angular.forEach(row, function(cell, colIndex) {
if ( all || values2sum.indexOf(colIndex) != -1 ) {
rowSum += cell;
}
});
row.push(rowSum);
})
}
$scope.addColumn = function() {
var rowSum, newRow = [], colId = $scope.columnsTest.length + 1;
$scope.columnsTest.push({
id: 'Value'+ colId,
checked: true,
value: 'Value'+colId
}); // rename columnsTest to tableHeading
//sumRows($scope.rows, [0,2]); // add value1 + value3
sumRows($scope.rows); // complete sum
//var newCol = { id: 'Value4', checked: true, value: 'Value1 + Value2 + Value3' }
//$scope.columnsTest.push(newCol);
}
$scope.columnsTest = [{
id: 'Value1',
checked: true,
value: 'Value1'
}, {
id: 'Value2',
checked: true,
value: 'Value2'
}, {
id: 'Value3',
checked: true,
value: 'Value3'
}];
/*$scope.rows = [{
id: 1,
"Value1": 911,
"Value2": 20,
"Value3": 20
}, {
id: 2,
"Value1": 200,
"Value2": 20,
"Value3": 20
}];*/
$scope.rows = [
[911,20,30],
[200,20,30]
]
});
<script data-require="angular.js#*" data-semver="1.2.0" src="http://code.angularjs.org/1.2.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div ng-app="plunker" ng:controller="MainCtrl">
<table border="1">
<thead style="font-weight: bold;">
<tr>
<th class="text-right" ng-repeat="column in columnsTest" ng-if="column.checked" ng-bind="column.id"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rows track by $index">
<td ng-repeat="cell in row track by $index">
<!--ng-if="column.checked">-->
{{ cell }}
</td>
</tr>
</tbody>
</table>
<br>
<br>
<input type="button" value="Add new column" ng-click="addColumn()" />
<br>
<br>
<br>
<p ng-repeat="c in columnsTest">Column {{$index}}: {{c}}</p>
</div>
In the following code, when I delete a customer, I want the TR row to disappear.
What is the best way to do this? Do I need to send the row as a parameter to deleteCustomer somehow? Do I have access to the TR DOM element within AngularJS somehow?
<html ng-app="mainModule">
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainController" style="padding: 20px">
<div class="col-lg-5">
<table style="width: 500px" class="table-striped table-bordered table table-hover">
<tr ng-repeat="customer in customers">
<td style="width:50px"><button ng-click="deleteCustomer(customer)">Delete</button></td>
<td style="text-align:right">{{customer.id}}</td>
<td>{{customer.firstName}}</td>
<td>{{customer.lastName}}</td>
</tr>
</table>
</div>
<div class="col-lg-7">
<div class="panel panel-info">
<div class="panel-heading">Logger</div>
<div class="panel-body" style="padding:0">
<table class="table table-bordered" style="margin:0">
<tr ng-repeat="loggedAction in loggedActions">
<td>{{loggedAction.action}}</td>
<td>{{loggedAction.description}}</td>
</tr>
</table>
</div>
</div>
</div>
<script>
var mainModule = angular.module('mainModule', []);
function mainController($scope) {
$scope.loggedActions = [];
$scope.customers = [
{id: 1, firstName: 'Joe', lastName: 'Thompson'},
{id: 2, firstName: 'Hank', lastName: 'Howards'},
{id: 3, firstName: 'Zoe', lastName: 'Frappe'}
];
$scope.deleteCustomer = function (customer) {
$scope.$emit('customerDeleted', customer);
};
$scope.$on('customerDeleted', function (event, customer) {
$scope.loggedActions.push({action: 'delete', description: 'Deleted customer ' + customer.firstName + ' ' + customer.lastName});
});
}
</script>
</body>
</html>
EDIT:
as pointed out by #K.Toress's comment, it's better to retrieve the index of the deleted customer via indexOf() from within the function, rather than passing $index from the ng-repeat.
passing $index will give unexpected results if using a filter or sorting the array.
deleteCustomer function:
$scope.deleteCustomer = function (customer) {
var index = $scope.customers.indexOf(customer);
$scope.customers.splice(index, 1);
$scope.$emit('customerDeleted', customer);
};
updated plnkr
you can use the $index provided by ng-repeat, and array.splice from within the delete function:
html:
<button ng-click="deleteCustomer($index, customer)">Delete</button>
js:
$scope.deleteCustomer = function ($index, customer) {
$scope.customers.splice($index, 1);
$scope.$emit('customerDeleted', customer);
};
plnkr
Working example:
http://plnkr.co/edit/7MOdokoohX0mv9uSWuAF?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.data = ['a', 'b', 'c', 'd', 'e'];
$scope.delete = function(at) {
$scope.data.splice(at, 1);
}
});
Template:
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="elem in data">
{{elem}}
<button ng-click="delete($index)">delete {{elem}}</button>
</div>
</body>
I have gone through a plunker link given below, which is passing 2 static data from JSON, I want to use ng-repeat and show all the data, and the result should change accordingly.
Plunker Link is : (http://plnkr.co/edit/5WF6FxvwocVBqhuvt4VL?p=preview)
code is given below
<!DOCTYPE html>
<html data-ng-app="App">
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body data-ng-controller="TestController">
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:search.type1 | filter:search.type2">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<input type="checkbox" data-ng-model='search.type1' data-ng-true-value='luxury' data-ng-false-value='' /> Luxury
<input type="checkbox" data-ng-model='search.type2' data-ng-true-value='double suite' data-ng-false-value='' /> Double suite
</body>
</html>
script is given below
// Code goes here
var iApp = angular.module("App", []);
iApp.controller('TestController', function($scope)
{
$scope.search=[];
$scope.hotels = [
{
name: 'the taj hotel',
star: 5,
type: 'luxury',
price: 5675
},
{
name: 'vivanta Palace',
star: 5,
type: 'luxury',
price: 8670
},
{
name: 'aviary',
star: 4,
type: 'double suite',
price: 3000
},
{
name: 'dummy',
star: 4,
type: 'dummy',
price: 33333100
},
{
name: 'good guest',
star: 3,
type: 'double suite',
price: 3500
},
{
name: 'the ramada',
star: 3,
type: 'luxury',
price: 7500
}
];
});
I think that you want something like this:
PLUNKER
Your HTML:
<table id="hotels">
<tr>
<th>Hotel Name</th>
<th>Star Rating</th>
<th>Hotel type</th>
<th>Hotel Price</th>
</tr>
<tr data-ng-repeat="hotel in hotels | filter:filertHotelTypes">
<td>{{hotel.name}}</td>
<td>{{hotel.star}}</td>
<td>{{hotel.type}}</td>
<td>{{hotel.price}}</td>
</tr>
</table>
<br/>
<h4>Filters</h4>
<label ng-repeat="hotelType in hotelTypes">
<input type="checkbox" value="{{hotelType}}" ng-checked="hotelTypefilter.indexOf(hotelType) > -1" ng-click="toggleSelection(hotelType)">
{{hotelType}}
</label>
Your controller:
$scope.hotelTypefilter=[];
$scope.hotelTypes = ['luxury','double suite','dummy'];
$scope.toggleSelection=function toggleSelection(hotelType) {
var idx = $scope.hotelTypefilter.indexOf(hotelType);
if (idx > -1)
$scope.hotelTypefilter.splice(idx, 1);
else
$scope.hotelTypefilter.push(hotelType);
};
$scope.filertHotelTypes = function(value, index){
return $scope.hotelTypefilter.length==0 || $scope.hotelTypefilter.indexOf(value.type)>-1;
}