我要做的是创建一个搜索功能,其中包含一个用于输入数据的文本框,以及一个下拉菜单,用于将搜索过滤到从下拉列表中选择的列。运行时,表中会显示所有数据,无论我输入什么内容,都不会隐藏任何记录。
搜索表单的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');
});
}]);
答案 0 :(得分:0)
在我看来,你的问题在于拆分控制器。记住每个视图是1个控制器。如果需要在视图/控制器之间共享数据,可以使用$ rootscope,或者理想情况下使用服务。
尝试从代码ng-controller="MembersCtrl"
答案 1 :(得分:0)
好的JS看起来有点不确定。你有没有宣布你的模块?
如果是,那么在该模块中,像这样定义你的控制器:
angular.module('myApp', [])
.controller('SearchCtrl', function($scope, $http){
//controller code
});