Camillia
asked on
Angular - why isn't this table working?
I hope someone can help me with this. I've looked at so many examples and just don't know why the search in this smart table isn't working.
1. This is our test site http://147.75.0.124:88/
You can login with admin@admin.com / Password321$
(this is our staging site. It's slow. Might have to load the page a couple of times, if it doesn't show up)
2. At the bottom, you see the smart table. It binds and data shows up.
3. Enter something in the search box and the table isn't being filtered.
4. I see smart-table.js in "source" tab of Chrome console.
what am I missing? I've spent so much time on it and looked at different examples. I don't see what I'm missing in it.
1. This is our test site http://147.75.0.124:88/
You can login with admin@admin.com / Password321$
(this is our staging site. It's slow. Might have to load the page a couple of times, if it doesn't show up)
2. At the bottom, you see the smart table. It binds and data shows up.
3. Enter something in the search box and the table isn't being filtered.
4. I see smart-table.js in "source" tab of Chrome console.
what am I missing? I've spent so much time on it and looked at different examples. I don't see what I'm missing in it.
ASKER
That link doesn't work.
I tried this http://plnkr.co/edit/FXCMUy6nmMwFDCyliLLx?p=preview
and changed my controller like this but still the search doesn't work
I tried this http://plnkr.co/edit/FXCMUy6nmMwFDCyliLLx?p=preview
and changed my controller like this but still the search doesn't work
(function () {
"use strict";
app.controller("feedCntrl",
["$scope", "feedService", function ($scope, feedService) {
var vm = this;
$scope.itemsByPage = 15;
$scope.rowCollection = [];
feedService
.getFeed()
.then(function (result) {
$scope.rowCollection = result.data;
$scope.newsFeedData = [].concat($scope.rowCollection);
});
}]);
})();
ASKER
I found this as well https://plnkr.co/edit/hjFLGV?p=preview
The link said
I tried that as well but still doesn't work
Table
The link said
You may choose to defer the initialization of the st-table by introducing ng-if="ready" or something. Then set ready=true only in the $http.get.then() after the values are fetched.
I tried that as well but still doesn't work
(function () {
"use strict";
app.controller("feedCntrl",
["$scope", "feedService", function ($scope, feedService) {
var vm = this;
$scope.itemsByPage = 15;
// $scope.rowCollection = [];
$scope.ready = false;
feedService
.getFeed()
.then(function (result) {
// $scope.rowCollection = result.data;
// $scope.newsFeedData = [];
$scope.rowCollection = [];
var values = result.data;
// $scope.newsFeedData = values; // [].concat($scope.rowCollection);
$scope.rowCollection = values;
$scope.ready = true;
});
}]);
})();
Table
<div class="col-md-12" >
<div class="tile">
<section class="tile-header" ng-if="ready">
<h1 class="heading">USCIS News Releases</h1>
<table st-table="rowCollection" class="table st-table table-striped minotaur-table" st-safe-src="newsFeedData">
I found this
does this make any sense
does this make any sense
stc.rowList = data;
stc.displayedCollection = [].concat(stc.rowList);
<table st-table="stc.displayedCollection" st-safe-src="stc.rowList>
<tr class="st-filters">
<th colspan="3">
<input st-search placeholder="global search" class="input-sm form-control" type="search" />
</th>
</tr>
<tr ng-repeat="row in stc.displayedCollection">
</table>
ASKER
I'll try it and post back.
As a matter of interest why are you not using standard Angular filters for this - in your search
Very simple table - not sure what benefit smart tables is bringing to this.
<table st-table="newsFeedData" st-safe-src="rowCollection" class="table st-table table-striped minotaur-table">
<thead>
<tr>
<th >Title</th>
<th st-sort="DatePublished" class="sorting">Published Date</th>
</tr>
<tr class="st-filters">
<th colspan="3">
// CREATE A MODEL
<input
ng-model="searchTerm"
st-search
placeholder="global search"
class="input-sm form-control"
type="search" />
</th>
</tr>
</thead>
<tbody>
// USE THE MODEL TO FILTER THE RESULTS
<tr ng-repeat="row in newsFeedData | filter:searchTerm">
<td style="width: 70%"><a target="_blank" href="{{row.Link}}">{{row.Title}}</a></td>
<td style="width: 30%">{{row.DatePublished | date}}</td>
</tr>
</tbody>
</table>
Very simple table - not sure what benefit smart tables is bringing to this.
ASKER
I want to sort by the data column. I also want to add paging. That's why I have a smart table.
I'll try your example as well.
I'll try your example as well.
ASKER
I just looked at Husyien example. I have seen that example and tried it last night and it didn't work.
I think it has something to do with the table not being ready but I tried that as well...my above code.
I can try Julian example but then I need paging and sorting as well. I just don't understand why this smart table isn't working.
I think it has something to do with the table not being ready but I tried that as well...my above code.
I can try Julian example but then I need paging and sorting as well. I just don't understand why this smart table isn't working.
I created a sample based on your data - I don't have access to your underlying JavaScript but it appears that you are not creating a safeSrc correctly so the search is not working.
This works for me
This works for me
<table st-table="display_data" st-safe-src="newsFeedData" class="table st-table table-striped minotaur-table">
<thead>
<tr>
<th >Angular Smart Table Test</th>
<th st-sort="DatePublished" class="sorting">Published Date</th>
</tr>
<tr class="st-filters">
<th colspan="3">
<input st-search="" placeholder="global search" class="input-sm form-control" type="search"/>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in display_data">
<td style="width: 70%"><a target="_blank" href="{{row.Link}}">{{row.Title}}</a></td>
<td style="width: 30%">{{row.DatePublished | date}}</td>
</tr>
</tbody>
</table>
Angular<script>
(function() {
'use strict';
angular.module('app',['smart-table'])
.controller('mainCtrl', mainController);
function mainController($scope, $http)
{
$http.get('t2444.php').then(function(resp) {
$scope.newsFeedData = resp.data;
});
}
})();
</script>
Working sample here
ASKER
I thought it could be my data structure. Let me see. I'll post back. In my site, I think I have a console.log to show the data. I'll check.
It is not your data structure - my sample uses your exact data structure without issue.
ASKER
I will look at this when I get home this afternoon (this is my side project and I'm at my real job now).
I'll post back. I did check your sample and it works. I'll compare and see what I'm missing.
I'll post back. I did check your sample and it works. I'll compare and see what I'm missing.
ASKER
Ok, I know what you mean but I can't get it working when I change the controller to this.
I'll close this question and look into this error. If I can't figure it out, I'll open another question.
And I have this in module.js
I have this for login controller
I'll close this question and look into this error. If I can't figure it out, I'll open another question.
(function () {
"use strict";
angular.module('lawApp',['smart-table']).controller("feedCntrl", //app.
["$scope", "feedService", function ($scope, feedService) {
feedService
.getFeed()
.then(function(result) {
$scope.newsFeedData = result.data;
});
}]);
})();
And I have this in module.js
var app = angular.module("lawApp", ['smart-table']);
I have this for login controller
(function () {
"use strict";
app.controller("loginCntrl",
["$scope", "loginService", function($scope, loginService) {
.....
On the login page, I get this error and can't even log inASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It was this
and I changed it to this
Yes, the news items were showing but I didn't have st-table and src correct at that time so search wasn't working.
But let me look at your example and I bookmarked some links last night that I will read today.
I'll post back.
app.controller("feedCntrl",
and I changed it to this
angular.module('lawApp',['smart-table']).controller("feedCntrl",
Yes, the news items were showing but I didn't have st-table and src correct at that time so search wasn't working.
But let me look at your example and I bookmarked some links last night that I will read today.
I'll post back.
ASKER
The smart table worked! I really can't believe it. I've been at this for 3 days now. Thank you so much.
Now, the loginController. I get this error
I'll see if I can follow what you have above. This is what I have now
Now, the loginController. I get this error
I'll see if I can follow what you have above. This is what I have now
var app = angular.module("lawApp", ['smart-table']);
app.service("loginService",["$http", function ($http) { //3. change to factory?
this.UserLogin = function (user) {
var response = $http({
method: "post",
url: "/Account/Login",
data: JSON.stringify(user),
dataType: "json"
});
//console.log(response);
return response;
}
}]);
(function () {
"use strict";
//2.
app.controller("loginCntrl", //angular.module('lawApp')
["$scope", "loginService", function($scope, loginService) {
$scope.submitLogin = function() {
var user = {
Email: $scope.email,
Password: $scope.password
};
var getData = loginService.UserLogin(user);
getData.then(function (msg) {
// console.log(msg);
if (msg.data == "Lockout") {
$scope.msg = "Your Account has been locked out";
}
else if (msg.data == "Invalid") {
$scope.msg = "Invalid login attempt";
}
else {
window.location.href = "/Main/Index";
}
});
};
}]);
})();
ASKER
Ok, I got the "login" code changed to this and now this works but bad news I get another error when I login. It's below.
I'll look at it now. From what I'm reading, I think I'm overriding the module.
Logincontroller and service
feedcontroller and service that you helped with
Error when I login
I'll look at it now. From what I'm reading, I think I'm overriding the module.
Logincontroller and service
(function () {
'use strict';
angular.module('lawApp', [])
.factory('loginService', loginService)
.controller('loginCntrl', loginController);
function loginService($http) {
return {
UserLogin: function (user) {
return $http({
method: "post",
url: "/Account/Login",
data: JSON.stringify(user),
dataType: "json"
});
}
}
}
function loginController($scope, loginService) {
$scope.submitLogin = function () {
var user = {
Email: $scope.email,
Password: $scope.password
};
var getData = loginService.UserLogin(user);
getData.then(function (msg) {
// console.log(msg);
if (msg.data == "Lockout") {
$scope.msg = "Your Account has been locked out";
}
else if (msg.data == "Invalid") {
$scope.msg = "Invalid login attempt";
}
else {
window.location.href = "/Main/Index";
}
});
};
}
})();
feedcontroller and service that you helped with
(function () {
'use strict';
angular.module('lawApp', ['smart-table'])
.factory('feedService', feedService)
.controller('feedCntrl', feedController);
function feedService($http) {
return {
getFeed: function () {
return $http({
method: 'GET',
url: '/api/immigrationfeed/feed'
});
}
}
}
function feedController($scope, feedService) {
feedService
.getFeed()
.then(function (resp) {
$scope.newsFeedData = resp.data;
console.log(resp.data);
});
}
})();
Error when I login
ASKER
I got the error above fixed as well. The one that said "feedCntrl" is not registered.
I think it was overriding the module. I did this to fix it.
In "loginController, I changed the code to this. It used to be
So, now the loginController and Smart table work. I have one more issue. Let me look at it and I'll post back if I can't figure it out.
I think it was overriding the module. I did this to fix it.
In "loginController, I changed the code to this. It used to be
angular.module('lawApp',[])
(function () {
'use strict';
angular.module('lawApp')
.factory('loginService', loginService)
.controller('loginCntrl', loginController);
So, now the loginController and Smart table work. I have one more issue. Let me look at it and I'll post back if I can't figure it out.
ASKER
I'll work on the other issue and if I can't figure it out, I'll post another question.
Thanks for your help.
Thanks for your help.
You are welcome.
Try to use Outside search field. For the reference please check this link.
http://plnkr.co/edit/13BQu