AngularJS и Django

новое для обоих django и AngularJs особенно.

У меня есть мои данные, поступающие из базы данных SQL в таблицу, и я хочу иметь возможность сортировать и искать его.

Базовая модель Django и представление, я думаю, что это будет html и js, с которыми я застрял.

Данные отображаются в тексте без проблем, просто поиск и сортировка не работают.

Это мой HTML:

<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

});

Я думаю, что это может иметь какое-то отношение к этой линии <tr ng-repeat="resource in resource_list | orderBy:sortType:sortReverse | filter:searchTable">

I see ng-repeat used if the data is coming from js, but what do I use if I only want to sort and search?

Любая помощь была бы очень признательна

2 ответа

  1. Я не вижу ресурсов в вашей области, вот пример, который я создал для вас

    <!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <body>
    
    <div ng-app="currencyApp" ng-controller="currencyCtrl">
    
    <ul>
      <li ng-repeat="x in resources | orderBy:'country' | filter: 'a' ">
        {{ x.country + ', ' + x.currency }}
      </li>
    </ul>
    
    </div>
    
    <script>
    angular.module('currencyApp', []).controller('currencyCtrl', function($scope) {
        $scope.resources = [
            {currency:'a',country:'Norway'},
            {currency:'b',country:'Sweden'},
            {currency:'c',country:'England'},
            {currency:'d',country:'Norway'},
            {currency:'e',country:'Denmark'},
            {currency:'g',country:'Sweden'},
            {currency:'h',country:'Denmark'},
            {currency:'i',country:'England'},
            {currency:'j',country:'Norway'}
            ];
    });
    </script>
    
    </body>
    </html>
    

    Я не добавил текстовое поле для фильтрации, вместо этого я жестко закодирован, чтобы показать вам рабочий пример

    Кстати, для сортировки для работы, вот синтаксис

    {{ array-you-are-looping | orderBy : expression : true/false }}
    

    если для третьего параметра задано значение true like

     {{ array-you-are-looping | orderBy : expression : true}}
    

    сортируется в обратном порядке

    если для третьего параметра задано значение false like

    {{ array-you-are-looping | orderBy : expression : false }}
    

    сортировка по возрастанию

  2. Remove for loop, you don’t want that when you use ng-repeat.

    Затем проверьте бит о правописании. Это должно сработать. Вы проверили консоль.