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>
Related
I'm new to mean stack implementation. I have tried to view data from controller. But It didn't work. web brower's console gave this error message at that time.
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl
Stack trace:
M/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:6:425
wf/this.$get</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:93:395
ba#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:76:290
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:68:1
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:496
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
g#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
ca/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:119
Pc/c/</<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:4
Mf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:176
Mf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:400
Pc/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:469
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:44:169
Pc/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:390
Pc#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:179
ue#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:20:379
#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:332:117
b#https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:38:36
Following files are server.js , index.html and controller.js files.How can Isolve this problem.
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + "/public"));
app.listen(3000);
console.log("Server is running");
index.html
<!DOCTYPE>
<html ng-app>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
function AppCtrl($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
This is error caused because the controller is not register in your application. The function AppCtrl is not called. Try registering the controller like this
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
for any doubts please check documentation example of controller
Please let me know if i misunderstood or missed something.
Hope this is helpful. Thank you.
var AppCtrlfn = function ($scope){
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
$scope.contactlist = contactlist;
}
angular.module('app', [])
.controller('AppCtrl',AppCtrlfn)
<html ng-app="app">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
extends from #yashwanth_t's comment and modify from your code
try this
your app.js
var myApp = angular.module('myApp',[]);
myApp.controller('ContactCtrl', ['$scope', function($scope) {
var person1 ={
name:'Hello',
email: '123',
number:'1'
};
var person2 ={
name:'gello',
email: '456123',
number:'31'
};
var person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
$scope.contactList = [];
$scope.contactList.push(person1);
$scope.contactList.push(person2);
$scope.contactList.push(person3);
console.log($scope.contactList)
}]);
in your index.html
<div class="container" ng-app="myApp">
<h1>Contact List</h1>
<table class="table" ng-controller="ContactCtrl">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactList">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Thank you everyone who try to help me..
I have to change index.html and controller.html files to solve that problem.
index.html
<!DOCTYPE>
<html ng-app="myapp">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<title>Contact app list</title>
</head>
<body>
<div class="container" ng-controller = "AppCtrl">
<h1>Contact List</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Number </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="content in contactlist">
<td>{{content.name}}</td>
<td>{{content.email}}</td>
<td>{{content.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
controller.js
var app = angular.module('myapp',[]);
app.controller ('AppCtrl', function($scope){
console.log("Hello controller");
person1 ={
name:'Hello',
email: '123',
number:'1'
};
person2 ={
name:'gello',
email: '456123',
number:'31'
};
person3 ={
name:'33Hello',
email: '33123',
number:'31'
};
var contactlist = [person1, person2 , person3];
console.log(contactlist);
$scope.contactlist = contactlist;
});
Trying to come to grips with Mustache... the problem here is that the conditional 'if/else' is not working as expected. I am checking in the data if a user is french... if they are then show true, else show false.
Problem
Mustache is completely ignoring the conditional and displaying both true and false for each table row.
My code
My markup
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
My jQuery
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
Question
Why is the if/else not working here?
EDIT: Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Mustache Examples</h1>
<!-- -->
<h3>Looping through people</h3>
<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Language</th>
</tr>
</thead>
<template id="template2">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</template>
<tbody id="table2"></tbody>
</table>
<!-- -->
</div>
<script>
$(function(){
/**
* conditional data
*/
template = $('#template2').html();
data = {
'users': [{
name: 'John',
age: 22,
language: 'French',
is_french: true,
},
{
name: 'Billy',
age: 33,
language: 'Anglaise',
is_french: false,
},
{
name: 'Michael',
age: 77,
language: 'Cambodian',
is_french: false,
}]
};
$('#table2').html(Mustache.render(template, data));
});
</script>
</body>
</html>
This is a problem of using template tag, which is actually HTML5 template tag. Using hashes in it makes browser think that this is document fragment. Seems like nested document fragments corrupt Mustache template.
Just change it to script tag, as in mustache manual.
<script id="template2" type="x-tmpl-mustache">
{{#users}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{language}}</td>
{{#is_french}}
<td>True</td>
{{/is_french}}
{{^is_french}}
<td>False</td>
{{/is_french}}
</tr>
{{/users}}
</script>
enter image description here
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>ContactApp</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="controllers/controller.js"></script>
</body>
</html>
Not so long time ago i started to learn MEAN stack and stuck in this problem.
As you can see on picture controller receive data from server but don't display it. What should I do to fix it? Thanks for any help. Sorry for poor English =D
controller code:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
}]);[enter image description here][1]
server code:
var express = require("express");
var app =express();
app.use (express.static(__dirname + "/public"));
app.get ('/contactlist',function(req,res){
console.log ('waitnig for my lovely request');
person1 = {
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
}
person2 = {
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
person3 = {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}
var contactlist = [person1,person2,person3];
res.json(contactlist);
})
app.listen(3000);
console.log ('server runing on port 3000');
Make sure your rest api returns a json array.
DEMO
var app = angular.module('todoApp', []);
app.controller("AppCtrl", ["$scope",
function($scope) {
$scope.contactlist = [{
name: 'HBN1',
email: 'HB1#robo.com',
number: '(111) 111-1111'
},
{
name: "HBN2",
email: "HB2#robo.com",
number: "(222) 222-2222"
}
, {
name: "HBN3",
email: "HB3#robo.com",
number: "(333) 333-3333"
}];
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Change:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response;
});
To:
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; // note the .data part
});
The response object properties can be found at : https://docs.angularjs.org/api/ng/service/$http
I cant comment because my reputation is too low but what do you see if you console.log(response) in your controller?
if the data is coming through intact, it your page is likely loading before the data arrives, hence displaying as empty. If that is the case the following will work.
<div class="container" ng-controller="AppCtrl" ng-show='isLoaded'> // add this ng-show
<h1>Contact app</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>E-mail</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contactlist">
<td>{{contact.name}}</td>
<td>{{contact.email}}</td>
<td>{{contact.number}}</td>
</tr>
</tbody>
</table>
</div>
Controller:
var myApp = angular.module('myApp',[]);
myApp.controller('AppCtrl',['$scope','$http',function($scope,$http){
console.log("hi");
$scope.isLoaded = false // add this
$http.get('/contactlist').then(function(response){
console.log ('RECIVED');
$scope.contactlist = response.data; //make response.data as Daniel said above
$scope.isLoaded = true; // add this
});
}]);[enter image description here][1]
I am trying to run simple code for ngTable but its showing only the headers and no data is shown. I am using the latest documentation for ngTable.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="ctrl">
<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="user in $data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
angular.module("myApp", ["ngTable"])
.controller('ctrl', ['NgTableParams', function(NgTableParams) {
var vm = this;
var data = [{
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}];
vm.tableParams = new NgTableParams({}, {
dataset: data
});
}])
</script>
You are mixing up Controller and controller as syntax together,
HTML
<div ng-controller="ctrl">
<table ng-table="tableParams" class="table" show-filter="true">
<tbody>
<tr ng-repeat="row in $data">
<td data-title="'Name'" sortable="'name'">{{ row.name }}</td>
<td data-title="'Age'" sortable="'age'">{{ row.age }}</td>
</tr>
</tbody>
</table>
</div>
Controller
var app = angular.module('ngTableApp', ['ngTable'])
.controller('ctrl', function($scope, $filter, $q, NgTableParams) {
var data = [{
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}, {
name: "Moroni",
age: 50
}];
$scope.tableParams = new NgTableParams({
page: 1,
count: 10
}, {
data: data
});
})
DEMO
problem was with your data variable , which your were accessing in view.
angular.module("myApp", ["ngTable"])
.controller('ctrl', ['NgTableParams','$scope', function(NgTableParams,$scope) {
var vm = this;
var data = [{
name: "Moroni1",
age: 50
}, {
name: "Moroni2",
age: 50
}, {
name: "Moroni3",
age: 50
}];
$scope.data = data;
vm.tableParams = new NgTableParams({}, {
dataset: data
});
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.css">
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div ng-app="myApp" ng-controller="ctrl">
<table ng-table="vm.tableParams" class="table" show-filter="true">
<tr ng-repeat="user in data">
<td title="'Name'" filter="{ name: 'text'}" sortable="'name'">
{{user.name}}</td>
<td title="'Age'" filter="{ age: 'number'}" sortable="'age'">
{{user.age}}</td>
</tr>
</table>
</div>
</body>
</html>
Module and Controller Code:
Search.js
/// <reference path="angular.min.js" />
var app = angular.module("module1", []).controller("controller1", function ($scope) {
var employees = [
{ name: "Arsalan", dateOfBirthe: new Date("Nov 23,1998"), gender: "Male", salary: "99939339.2345" },
{ name: "Kamran", dateOfBirthe: new Date("Dec 01,2000"), gender: "FeMale", salary: "99939339" },
{ name: "Arshad", dateOfBirthe: new Date("May 23,1999"), gender: "Male", salary: "99939339" },
{ name: "Jrsaloon", dateOfBirthe: new Date("Jan 01,2016"), gender: "Male", salary: "99939339.2345" }
];
$scope.employees = employees;
});
Here is the View Code from Search.html:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/search.js"></script>
<script src="Scripts/angular.js"></script>
<link href="StyleSheet1.css" rel="stylesheet" />
</head>
<body ng-app="module1">
<div ng-controller="controller1">
Search : <input type="text" placeholder="Search Employees" ng-model="searchText.gender"/>
<br/><br/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date Of Birth</th>
<th>Gender</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees | filter:searchText">
<td>{{employee.name}}</td>
<td>{{employee.dateOfBirthe}}</td>
<td>{{employee.gender}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Out-Put Screen:
Search.png
Description: My Module+Controller data is do not bind with view ,
any one help me that how i will recorretct my code that it
do the work properly.............tnx
Include search.js AFTER angular.js. Also, for using searchText, see Shyju's answer.
<script src="Scripts/angular.js"></script>
<script src="Scripts/search.js"></script>