使用角度js搜索功能,并且php无法正常工作

时间:2016-01-10 13:34:08

标签: javascript php html mysql angularjs

我要做的是创建一个搜索功能,其中包含一个用于输入数据的文本框,以及一个下拉菜单,用于将搜索过滤到从下拉列表中选择的列。运行时,表中会显示所有数据,无论我输入什么内容,都不会隐藏任何记录。

搜索表单的HTTP

                    <div class="form-group col-lg-4" ng-controller="SearchCtrl">
                    <form>
                        <label>Search By:</label>
                            <select data-ng-model="search">
                              <option value="">All</option>
                              <option value="id">ID</option>
                              <option value="name">Name</option>
                              <option value="surname">Surname</option>
                              <option value="status">Status</option>
                            </select>
                        <input type="text" class="form-control" ng-model="searchBy">                    
                    </form>
                <a href="#/newMember">Add New Member</a><br>    
                </div>

HTTP of the table displaying the records

<div ng-controller="MembersCtrl"> 
                    <table id="t01">
                        <thead>
                          <tr>
                            <th><a href="" ng-click="sortField = 'id';reverse=!reverse">ID</a></th>
                            <th>Image</th>
                            <th><a href="" ng-click="sortField = 'id';reverse=!reverse">Full Name</a></th>
                            <th>Summary</th>
                            <th colspan="3">Tools</th>
                          </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="m in members | filter:searchBy | orderBy:sortField:reverse">
                                <td>{{m.id}}</td>
                                <td style="width: 10%;"><img class="profImg" ng-src="{{m.imagePath}}"/></td>
                                <td>{{m.name}} {{m.surname}}</td>
                                <td>{{m.summary}}</td>                                  
                                <td><a href="#/membersPage/{{m.id}}">View</a>  
                                    <a href="#/editMember/{{m.id}}">Edit</a>
                                    <a ng-click="delProfile(m)">Delete</a>
                                </td>       
                        </tbody>
                    </table>
                    <p data-ng-show="(results | filter:search).length==0">There are no results for this search</p>
                </div>

Java脚本

app.controller('SearchCtrl', ['$scope', '$http', function carHireController($scope, $http) {
    $http.get('php/showMembers.php').success(function(data) {
        $scope.results = data.results;
    }).error(function(data, status, headers, config) {
    console.log('error');
  });   
}]);

2 个答案:

答案 0 :(得分:0)

在我看来,你的问题在于拆分控制器。记住每个视图是1个控制器。如果需要在视图/控制器之间共享数据,可以使用$ rootscope,或者理想情况下使用服务。

尝试从代码ng-controller="MembersCtrl"

中删除此行

答案 1 :(得分:0)

好的JS看起来有点不确定。你有没有宣布你的模块?

如果是,那么在该模块中,像这样定义你的控制器:

    angular.module('myApp', [])

    .controller('SearchCtrl', function($scope, $http){

        //controller code                   

    });