AngularJS search doesn't work

Question

I have a MySQL database and table in it. I take data from it using Node JS. My HTML code contains input search and a table that has data from search results. I use AngularJS for searching.

The problem is that search doesn't work. I have the whole table instead of some results.

Part of HTML code:

<div class="search">
  <form action="" method="post" class="searchform" >
    <input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
    <input type="submit" name="" value="" class="submitsearchform" />
  </form>
</div>
<div class="songlist" ng-app='test_table' ng-controller='main_control'>
  <table id="songlistTableR">   
    <tr><th>Name</th><th>Link</th></tr>    
    <tr ng-repeat="data in loaded | filter:search">
      <td><i class="fa fa-plus"></i>{{data.song_name}}</td>
      <td><a href="{{data.link}}" target='_blank'>Youtube</a></td>     
    </tr>
  </table>      
</div>

JS script:

var app = angular.module('test_table', []);
app.controller('main_control',function($scope, $http){
    load();
    function load(){
        $http.get("http://localhost:7001/load").success(function(data){
            $scope.loaded=data;
        });
    }       
});

Tmb · Accepted Answer · 2016-03-23 16:52:27Z

2

All your angular html code need to be nested in the ng-app attribute, so your <div class="search"> is never parsed by Angular, including your ng-model definition. You should edit your code into something like:

<div class="songlist" ng-app='test_table' ng-controller='main_control'>
  <div class="search">
    <form action="" method="post" class="searchform" >
      <input type="search" name="" placeholder="Поиск" class="inputsearchform" ng-model="search"/>
      <input type="submit" name="" value="" class="submitsearchform" />
    </form>
  </div>
  <table id="songlistTableR">   
    <tr><th>Name</th><th>Link</th></tr>    
    <tr ng-repeat="data in loaded | filter:search">
      <td><i class="fa fa-plus"></i>{{data.song_name}}</td>
      <td><a href="{{data.link}}" target='_blank'>Youtube</a></td>     
    </tr>
  </table>      
</div>

answered Mar 23, 2016 at 16:52

Tmb

48012 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lev Over a year ago

Of course I will accept, but I can do it only in 2 minutes. Can you help, how to search only in song_name column for example?

Tmb Over a year ago

@LevS something like this ng-repeat="data in loaded | filter:{song_name: search}"

Collectives™ on Stack Overflow

AngularJS search doesn't work

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related