AngularJSとDjango

特にdjangoとAngularJsの両方に新しい。AngularJSとDjango

私は自分のデータを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 

});

私はそれが私がデータ場合は使用NGリピートを参照してください。この行で<tr ng-repeat="resource in resource_list | orderBy:sortType:sortReverse | filter:searchTable">

を行うための何かを持っているかもしれないと思いますjsから来ていますが、並べ替えて検索するだけの場合はどうすればよいですか？

すべてのヘルプは大幅に

出典

2016-12-29 Adam

をいただければ幸い私はあなたのスコープ内のリソースが表示されていない、ここで私はフィルタリングするテキストフィールドを追加していない私はあなたのため

<!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 }}

です昇順

でソート

あなたは

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

のような真の3番目のパラメータを設定する場合はfalseに三番目のパラメータを設定した場合、それは逆の順序で

をソートするよう

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

それは

出典

2016-12-29 05:40:49

ありがとう、私は直面している問題は私のデータは、スクリプトで設定されていないforループと私のSQL DBから来ている、どのようにこのソースから来るデータを並べ替え、フィルタできますか？ – Adam

ループのためにを削除すると、ng-repeatを使用するときは不要になります。

次に、スペルについて確認してください。これは機能しなければならない。コンソールをチェックしましたか？

出典

2016-12-29 05:46:53

お返事ありがとうございます。その問題はforループが自分のSQL DBからデータを取り込むことです。他にもng-repeatを使って自分のデータをソートしてフィルタリングすることができるものがありますか？ – Adam

答えて

関連する問題