Just diving into the world of Django and AngularJs, feeling a bit lost.
I have my data flowing in from an SQL database to a table and I'm struggling to implement sorting and searching functionalities.
I have the basics covered with Django model and view, but it's the HTML and JS that are causing me trouble.
The data is being displayed without any issues, but the search and sort features aren't functioning properly.
This is what my HTML looks like:
<div class="box" ng-app="sortApp" ng-controller="mainController">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search table" ng-model="searchTable">
</div>
</div>
</form>
<table class="table table-bordered table-striped">
<thead>
<tr>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Name
<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'cost'; sortReverse = !sortReverse">
Cost
<span ng-show="sortType == 'cost' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'cost' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'resource_type'; sortReverse = !sortReverse">
Resource Type
<span ng-show="sortType == 'resource_type' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'resource_type' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'unit'; sortReverse = !sortReverse">
Unit
<span ng-show="sortType == 'unit' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'unit' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
{% for resource in resource_list %}
<tr ng-repeat="resource in resource_list | orderBy:sortType:sortReverse | filter:searchTable">
<td>{{ resource.resource_name }}</td>
<td>{{ resource.resource_cost }}</td>
<td>{{ resource.resource_type }}</td>
<td>{{ resource.resource_unit }}</td>
</tr>
{% endfor resource%}
</tbody>
</table>
</div>
JS:
// Resource Table
angular.module('sortApp', [])
.controller('mainController', function($scope) {
$scope.sortType = 'name'; // set the default sort type
$scope.sortReverse = false; // set the default sort order
$scope.searchTable = ''; // set the default search/filter term
});
It seems like the issue might be related to this line
<tr ng-repeat="resource in resource_list | orderBy:sortType:sortReverse | filter:searchTable">I've seen ng-repeat used when the data is coming from JavaScript, but what should I use if I only want to implement sorting and searching?
Any assistance on this matter would be highly appreciated