Link to home
Start Free TrialLog in
Avatar of Camillia
CamilliaFlag for United States of America

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.
Avatar of Banshi lal dangi
Banshi lal dangi
Flag of India image

Hi,
Try to use Outside search field. For the reference please check this link.
http://plnkr.co/edit/13BQuOkBfxYjTPuWg3J7?p=preview
Avatar of Camillia

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

(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);

          });

       }]);



})();

Open in new window

I found this as well https://plnkr.co/edit/hjFLGV?p=preview

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;
               });

       }]);



})();

Open in new window


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">

Open in new window

I found this
does this make any sense

stc.rowList = data;
stc.displayedCollection = [].concat(stc.rowList);

Open in new window


<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>

Open in new window

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
<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>

Open in new window


Very simple table - not sure what benefit smart tables is bringing to this.
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 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 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
<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>

Open in new window

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>

Open in new window

Working sample here
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.
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.
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.

(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;
                
               });
       }]);

})();

Open in new window


And I have this in module.js

var app = angular.module("lawApp", ['smart-table']);

Open in new window


I have this for login controller
(function () {
    "use strict";

    app.controller("loginCntrl",
       ["$scope", "loginService", function($scope, loginService) {
           .....

Open in new window

On the login page, I get this error and can't even log in
User generated image
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
It was this

 app.controller("feedCntrl",

Open in new window


and I changed it to this

 angular.module('lawApp',['smart-table']).controller("feedCntrl",

Open in new window


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.
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 errorUser generated image
I'll see if I can follow what you have above. This is what I have now

var app = angular.module("lawApp", ['smart-table']);

Open in new window


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;
    }

}]);

Open in new window


(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";
                                }
                            });

            };

           
        }]);

})();

Open in new window

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
(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";
                }
            });

        };
    }
})();

Open in new window


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);
            });
    }
})();

Open in new window


Error when I login
User generated image
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      
angular.module('lawApp',[])

Open in new window


(function () {
    'use strict';
    angular.module('lawApp')
		.factory('loginService', loginService)
		.controller('loginCntrl', loginController);

Open in new window


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'll work on the other issue and if I can't figure it out, I'll post another question.

Thanks for your help.
You are welcome.