Ng-repeat finished refire after filter

Ng-repeat finished refire after filter - javascript

I'm trying to launch a function everytime the ng-repeat is finished,
I've got the following so far:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}, {
name: 'Juliette',
phone: '555-5678'
}]
$scope.test = function() {
console.log('test');
}
});
app.directive('onFinishRender', function($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
scope.$evalAsync(attr.onFinishRender);
}
}
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<label>Search:
<input ng-model="searchText">
</label>
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</body>
</html>
This fires the function once, but how would you modify this to make it work every time the filter get's applied?
Plunker version

If I understand your requirement correct, you would use ng-change directive to your input box of search.
Use this :
<input ng-model="searchText" ng-change="test();">

I have added scope to the directive. also ngRepeat's $last is sent through the scope variable. And changes to scope.last are being watched using scope.$watch so whenever list changes scope.last will change and then return true at the last step. This will run whenever there is a change in collection.
See the updated Plunkr
http://plnkr.co/edit/68XXIQyo2rkUP4uj6bnI?p=preview
HTML:
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<label>Search:
<input ng-model="searchText">
</label>
<table id="searchTextResults">
<tr>
<th>Name</th>
<th>Phone</th>
</tr>
<tr ng-repeat="friend in friends | filter:searchText" on-finish-render="test()" last="$last">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
</tr>
</table>
</body>
</html>
JS:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.friends = [{
name: 'John',
phone: '555-1276'
}, {
name: 'Mary',
phone: '800-BIG-MARY'
}, {
name: 'Mike',
phone: '555-4321'
}, {
name: 'Adam',
phone: '555-5678'
}, {
name: 'Julie',
phone: '555-8765'
}, {
name: 'Juliette',
phone: '555-5678'
}]
$scope.test = function() {
console.log('test');
}
});
app.directive('onFinishRender', function($timeout) {
return {
restrict: 'A',
scope: {
onFinishRender: '&',
last: '='
},
link: function(scope, element, attr) {
scope.$watch('last', function(){
if (scope.last === true) {
scope.onFinishRender();
}
});
}
}
});

Related

Angularjs and ui-grid - add event keypress in cell

First of all, I want to say that I am beginner with angularjs :D
My problem is:
I'm trying add the keypress event when user goes to edit the value in cell on angular ui-grid.
In the beginning it seems to work, but when I finish editing a cell and mute the focus the value disappears.
Here is the link to see the event running: https://plnkr.co/edit/vw8W6PqFt11nt4BDhWu9
And here is my code:
File: index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.js"></script>
<link rel="stylesheet" href="//cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.6/ui-grid.min.css" type="text/css" />
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>
File: app.js
(function() {
var app = angular.module('app', ['ui.grid', 'ui.grid.edit']);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
$scope.gridOptions = {
columnDefs: [{
field: 'name'
}, {
field: 'amount',
name: 'Number'
}, {
field: 'someValue',
name: 'SomeValue',
editableCellTemplate: 'template-cell.html'
}]
};
$http.get('data.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);
app.directive('numbersOnly', function () {
return {
require: 'ngModel',
link: function (scope, element, attr, ngModelCtrl) {
function fromUser(text) {
if (text) {
var transformedInput = text.replace(/[^0-9]/, '');
if (transformedInput !== text) {
ngModelCtrl.$setViewValue(transformedInput);
ngModelCtrl.$render();
}
return transformedInput;
}
return undefined;
}
ngModelCtrl.$parsers.push(fromUser);
}
};
});
}());
File: cell-template.html
<div>
<form name="inputForm">
<input type="text"
ui-grid-editor
ng-model="someValue"
data="row.entity.someValue"
ng-class="'colt' + col.uid"
numbers-only />
</form>
</div>
I need this functionality with keypress event only. How do I update the model with the input field value ?
Thanks.

The problem is that your column value is not correctly bound to the ngModel in the cell template.
The correct value would be to use the MODEL_COL_FIELD which you can read more about in the wiki, look at section "Editable Cell Templates"
Update your cell-template.html to
<div>
<form name="inputForm">
<input type="text"
ui-grid-editor
ng-model="MODEL_COL_FIELD"
ng-class="'colt' + col.uid"
numbers-only />
</form>
</div>

How come my Angular1.6 bindings are not working?

I am trying to learn the new components and I have a weak understanding of bindings and the symbols.
How come I cannot get my ng-repeat to work with this code.. I have tried using controllerAs syntax, scope, changing the bindings, everything!
APP.JS
var app = angular.module('myApp', []);
/* Mock-Data */
app.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MO'
}]);
app.controller('HomeCtrl', ['friends', function(friends) {
this.$onInit = function() {
console.log("HomeCtrl has been initialized");
this.friends = friends;
console.log(this.friends);
};
}]);
app.component('myGrid', {
templateUrl: 'grid.html',
controller: 'HomeCtrl',
bindings: {
data: '<' // I have tried: &,<,=,#
}
});
Index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<my-grid data="friends"></my-grid>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Grid.html
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in data">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>
No matter what I try, I cannot get ng-repeat to work..

You don't have a controller scoped in index.html in order to tell angular where friends comes from. Can add an ng-controllerto solve this
In component you are using controllerAs which is set to vm alias so you need to reference that in the view also
index.html
<div class="container" ng-controller="HomeCtrl as ctrl">
<my-grid data="ctrl.friends"></my-grid>
</div>
grid.html
<tr ng-repeat="employee in vm.data">
DEMO

Your design is bit incorrect.You have not passed friends data to your directive from the parent scope.
Working Plunk inline with you e.g
angular.module("myApp",[])
.controller('ctr1', function($scope, friends){
$scope.friends=friends;
})
.constant('friends', [{
firstName: 'Conner',
lastName: 'A',
location: 'Melborne, Australia'
}, {
firstName: 'Dom',
lastName: 'M',
location: 'Los Angeles, CA'
}, {
firstName: 'Bryan',
lastName: 'A',
location: 'Seattle, WA'
}, {
firstName: 'Dan',
lastName: 'M',
location: 'Kalispell, MOO'
}])
.component('myGrid', {
templateUrl: 'grid.html',
bindings: {
friends: '<'
},
controller:function() {
this.$onInit = function() {
console.log(this.friends);
}
}
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ctr1">
<div class="container">
<my-grid friends="friends"></my-grid>
</div>
</body>
</html>
<!--************************Grid.html****************
<div class="panel panel-primary">
<div class="panel-heading">Angular 1.X - Example Component</div>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in $ctrl.friends">
<td>{{ employee.firstName }}</td>
<td>{{ employee.lastName }}</td>
<td>{{ employee.location }}</td>
</tr>
</tbody>
</table>
</div>

Scope values aren't displayed when getting HTML from server

UPDATE
After doing many tests on my code I'm updating my previous question, as it's now clearer to me what's not working.
My HTML file is served when I browse to the / directory in my local
All the pages loads nicely except for the content of the $scope in my directives (see below).
I've tested loading the page directly (just clicked on the html file) and I can see the content.
I'm not sure where the problem is.
I've removed all un-necessary lines from the HTML file to give a better pictures of my code. the {{}} is just the templating engine language.
HTML
<DOCTYPE html>
<html ng-app="docsSimpleDirective">
<head>
<link rel="stylesheet" type="text/css" href="/css/text.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0- alpha.5/css/bootstrap.min.css" integrity="sha384- AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"> </script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
</head>
<body >
<h3>Select some text </h3>
<div ng-controller="Controller">
{% for i in result %}
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
<br/>
{% endfor %}
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
})(window.angular);
</script>
</body>
</html>

You can create an isolated scope to the directive as below with the same name as a directive name,
scope: {
myCustomer: '='
}
and link the controller's $scope.customer to this isolated scope as below,
<div ... my-customer="customer"></div>
And change your template to access the same like this,
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
Working sample:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<h3>Select some text </h3>
<div ng-controller="Controller">
<div id="test1" class="task" commentId="test1" get-popover-content>{{i.text}} </div>
<div id="test2" class="task" commentId="test2" my-customer="customer">{{i.text}} </div>
<br/>
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
});
angular.bootstrap(document, ['docsSimpleDirective']);
})(window.angular);
</script>
</body>

You have to use scope: { .... } inside directive to access your controller scope
Controller
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
HTML
// use this directive and pass customer to the directive scope
<my-customer customer="customer"></my-customer>
Directive
.directive('myCustomer', function() {
return {
scope: {
customer: '=customer'
}
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});

Surround with
{{% raw %}} ... {{% endraw %}}

This is probably a better pattern for what you're trying to achieve (note the comment for an API call for your customers in JSON format).
Calling for the data via API after the page has loaded will allow you to keep your HTML/CSS/JAVASCRIPT as totally static files (no templating engine etc) and decoupled from your data.
It will load faster and give you the option to host your web front-end entirely on something like a CDN (which frees up your API server to focus only on requests for data/ sessions stuff like that).
<DOCTYPE html>
<html ng-app="docsSimpleDirective">
<head>
<!-- <link rel="stylesheet" type="text/css" href="/css/text.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"> </script><!-- Tether for Bootstrap -->
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.min.js"></script><!-- Bootstrap -->
</head>
<body>
<h3>Select some text</h3>
<div ng-controller="Controller">
<div ng-repeat="customer in customers">
<!-- not sure what 'id' or 'text' values are, you should pass them in
via API if they are needed -->
<div id={{i._id}} class="task" commentId = {{i._id}} get-popover- content>{{i.text}} </div>
<div id={{i._id}} class="task" commentId = {{i._id}} my-customer="customer">{{i.text}} </div>
<br/>
</div >
</div>
<script>
(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
// make a request to api to get customers in JSON format
// assign result to scope.customers
$scope.customers= [
{
name: 'Naomi',
address: '1600 Amphitheatre'
},
{
name: 'Amir',
address: '58 W 54th st'
}
];
}])
.directive('myCustomer', function() {
return {
scope: {
myCustomer: '='
},
template: 'Name: {{myCustomer.name}} Address: {{myCustomer.address}}'
};
}); // directive
})(window.angular);
</script>
</body>
</html>
you can also mock a REST API server by making a request to a static file like this:
$http.get("./myFakeAPI.json").then(function(response){
$scope.customers = response.data.customers;
});
where the contents of the file 'myFakeAPI.json' is:
{
"customers":
[
{
name: 'Naomi',
address: '1600 Amphitheatre'
},
{
name: 'Amir',
address: '58 W 54th st'
}
]
}

Simple example can't access scope

I am trying to learn AngularJS, and going through an older tutorial I have built out a simple app. It has an index.html and two partial views which are loaded via ui-router. I know it's not separated into different files -- this is a learning project only.
The problem is that $scope does not seem to be available in View1 or in its called JS function , so ng-repeat doesn't seem to find anything to display, and addCustomer cannot see $scope.newCustomer.name. I am sure that I am missing something simple.
index.html:
<!DOCTYPE html>
<html ng-app="demoApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/angular/angular.js"></script>
<script src="js/angular-ui-router/angular-ui-router.js"></script>
<!-- your app's js -->
<script>
var demoApp = angular.module('demoApp', ['ui.router']); // [] is for dependencies
// routes
demoApp.config(function($stateProvider, $urlRouterProvider) {
var nameState = {
name: 'name',
url: '/view1',
controller: 'SimpleController',
templateUrl: 'partials/View1.html'
}
var cityState = {
name: 'city',
url: '/view2',
controller: 'SimpleController',
templateUrl: 'partials/View2.html'
}
$stateProvider.state(nameState);
$stateProvider.state(cityState);
$urlRouterProvider.otherwise('/view1');
});
// controller
demoApp.controller("SimpleController", function ( $scope, $log ) {
$scope.log = $log;
$scope.customers = [{name: 'John Doe', city:'New York'},
{name: 'Jake Smith', city:'Atlanta'},
{ name: 'Jane Doe', city:'San Francisco'}];
$scope.addCustomer = function () {
$log.log("Add customer");
$scope.customers.push(
{name: $scope.newCustomer.name, city: $scope.newCustomer.city}
);
};
});
</script>
</head>
<body>
<div>
<!-- placeholder for views inserted by ui-router -->
<ui-view></ui-view>
</div>
</body>
</html>
View1.html:
<div class="container">
<h2>View 1</h2>
Name: <input type="text" ng-model="filter.name" /> You entered: {{filter.name}}
<div class="container">
<h3> Loop </h3>
<ul>
<li ng-repeat="cust in $scope.customers | filter:filter.name">{{ cust.name }} - {{ cust.city }}</li>
</ul>
<br /> Customer Name:
<input type="text" ng-model="newCustomer.name" />
<br /> Customer City:
<input type="text" ng-model="newCustomer.city" />
<br />
<br />
<button ng-click="addCustomer()">Add Customer</button>
</div>
Switch to View 2
</div>

Use only
ng-repeat="cust in customers"

You don't have to specify $scope in the html:
ng-repeat="cust in customers"

try this :
<li ng-repeat="cust in customers">
you dont need to mention $scope.customers

try this (remove "$scope.") :
ng-repeat="cust in customers | filter:filter.name"
instead of :
ng-repeat="cust in $scope.customers | filter:filter.name"

Angular + ngRoute + ng-table not working

Can anyone tell me why I am getting JS error "Error: [$injector:unpr]" with this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Example</title>
<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>
<!-- <script src="js/app.js"></script>-->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Stylesheet -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ngRoute', 'ngTable']);
/* Routing */
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'welcome.html'});
$routeProvider.when('/table/', {controller: 'TableCtrl', templateUrl: 'table.html'});
$routeProvider.otherwise({redirectTo: '/'});
}
]);
/* Table controller */
app.controller('TableCtrl', ['$scope', 'ngTableParams', function ($scope, ngTableParams) {
var data = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29}];
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function ($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
</script>
</head>
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
where table.html is:
<h1>Events</h1>
<p><strong>Page:</strong> {{tableParams.page()}}</p>
<p><strong>Count per page:</strong> {{tableParams.count()}}</p>
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'">{{user.name}}</td>
<td data-title="'Age'">{{user.age}}</td>
</tr>
</table>
I am already struggling around with this problem but can't find a solution. Other people reported the same problem but I couldn't find a solution which is working for me.
Thanks for your help,
Max

Here is an working example, probably solve your problem
angular.module('app', ['ngRoute', 'ngTable'])
/* Routing */
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
template: '<div>Welcome</div>'
});
$routeProvider.when('/table/', {
controller: 'TableCtrl',
template: '<h1>Events</h1><p><strong>Page:</strong> {{tableParams.page()}}</p><p><strong>Count per page:</strong> {{tableParams.count()}}</p><table ng-table="tableParams" class="table"><tr ng-repeat="user in $data"><td data-title="Name">{{user.name}}</td><td data-title="Age">{{user.age}}</td></tr></table>'
});
$routeProvider.otherwise({
redirectTo: '/'
});
}
])
.controller('TableCtrl', ['$scope', 'NgTableParams', function($scope, NgTableParams) {
var data = [{
name: "Moroni",
age: 50
}, {
name: "Tiancum",
age: 43
}, {
name: "Jacob",
age: 27
}, {
name: "Nephi",
age: 29
}];
$scope.tableParams = new NgTableParams({
page: 1, // show first page
count: 10 // count per page
}, {
total: data.length, // length of data
getData: function($defer, params) {
$defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}]);
<body ng-app="app">
Welcome
Table
<div ng-view="" class="container content"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="https://cdn.rawgit.com/esvit/ng-table/1.0.0/dist/ng-table.js"></script>

Develop Reference

JavaScript is the programming language of the Web.

Ng-repeat finished refire after filter - javascript

If I understand your requirement correct, you would use ng-change directive to your input box of search. Use this : <input ng-model="searchText" ng-change="test();">

Related

Angularjs and ui-grid - add event keypress in cell

How come my Angular1.6 bindings are not working?

Scope values aren't displayed when getting HTML from server

Simple example can't access scope

Angular + ngRoute + ng-table not working

Categories

Resources