2017-11-07 9 views
0

私のコードでこの問題を指摘してください。なぜドロップダウン選択項目が表示されないのですか?私はngTable Exampleに行きました、それは私にすべての詳細を与えていませんでした。私はソースngTableDemosを見つけることができないので、私はfilterDataが正確に何であるべきか分からず、私の推測で作られています。ng-table filterDataが機能しない

 "use strict"; 
 
     angular.module('myApp', ['ngTable']).controller("myCtrl", ['NgTableParams', function (NgTableParams) { 
 
     this.cols = [ 
 
      {field: 'name', title: 'Name', filter: {name: 'text'}}, 
 
      {field: 'age', title: 'Age', filter: {age: 'number'}}, 
 
      {field: 'gender', title: 'Gender', filter: {gender: 'select'}, filterData: ['male', 'female', 'shemale']} 
 
     ]; 
 
     this.tbParams = new NgTableParams({}, { 
 
      dataset: [ 
 
      {name:'abc1001',age:11,gender:'male'}, 
 
      {name:'abc1002',age:12,gender:'female'}, 
 
      {name:'abc1003',age:13,gender:'shemale'} 
 
      ] 
 
     }); 
 
     }]);
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
    <head lang="en"> 
 
    <title>demo23</title> 
 
    <meta charset="utf-8"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.js"></script> 
 
    <script type="text/javascript" src="https://unpkg.com/[email protected]/bundles/ng-table.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/bundles/ng-table.min.css" /> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid" ng-controller = "myCtrl as ctrl"> 
 
     <table ng-table-dynamic="ctrl.tbParams with ctrl.cols" class="table table-condensed table-bordered table-striped"> 
 
     <tr ng-repeat="row in $data"> 
 
      <td ng-repeat="col in $columns" >{{row[col.field]}}</td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 
    </body> 
 
</html>

答えて

0

最後に、私はNG-table.js(4.0.0)に掘ると答えを見つけました。行2841:filterData: [{id: 'male', title: 'male'}, {id: 'female', title: 'female'}, {id: 'shemale', title: 'shemale'}]filterData: ['male', 'female', 'shemale'];:

var html = "<select ng-options=\"data.id as data.title for data in $column.data\"\n  ng-disabled=\"$filterRow.disabled\"\n  multiple ng-multiple=\"true\"\n  ng-model=\"params.filter()[name]\"\n  class=\"filter filter-select-multiple form-control\" name=\"{{name}}\">\n</select>\n"; 

は、だから私は私のコードを変更しましたそれは働いた。もちろん、filterData: [{id: 'male', title: 'Male'}, {id: 'female', title: 'Female'}, {id: 'shemale', title: 'She-Male'}]も働いた。

スマートテーブルと比べると、ngテーブルが洗練されています。しかし、自分のコードを作るために文書を読むことは本当の挑戦です。依存関係のコードを提供し、コードペーンからプランカに移動することができるかどうかを理解する。

関連する問題