javascript - 如何在 AngularJS 的 ng-table 的过滤器属性中放置一个日期选择器？

Question

如何在 angularjs 的 ng-table 的 filter 属性中放置一个日期选择器？ 这可能吗？任何可以帮助我解决此案的人。提前感谢那些有好心的人!很抱歉我的菜鸟问题。

id: 'date' 不工作。

这是我的 person.js 和 person-table.html

(function() {
  var app = angular.module("myApp", ["ngTable"]);
  app.controller("demoController", demoController);
  
  function demoController(NgTableParams) {
  //MM-dd-yyyy
   var simpleList = [{
    "name": "Mark",
    "birthDate": "02-23-1999",
    "age": "17"
   },{
    "name": "Jose",
    "birthDate": "02-14-1997",
    "age": "21"
   },{
    "name": "Noel",
    "birthDate": "06-26-2000",
    "age": "17"
   },{
    "name": "Pankhar",
    "birthDate": "03-24-1999",
    "age": "18"
   }];
    this.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
    this.nameFilter = {
      name: {
        id: 'text',
        placeholder: 'Filter by name'
      }
    };
    this.birthDayFilter = {
      birthDate: {
        id: 'text',
        placeholder: 'MM-dd-yyyy'
      }
    };
    this.ageFilter = {
      age: {
        id: 'number',
        placeholder: 'Filter by age'
      }
    };
  }
})();

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<div ng-app="myApp" ng-controller="demoController as demo">
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
 <tbody ng-repeat="row in $data track by $index">
  <tr>
    <td data-title="'Name'"  filter="demo.nameFilter">{{row.name}}</td>
    <td data-title="'Birth Date'" filter="demo.birthDayFilter">{{row.birthDate}}</td>
    <td data-title="'Age'" filter="demo.ageFilter">{{row.age}}</td>
  </tr>
 </tbody>
</table>
</div>

Answer 1

您可以使用自定义过滤器模板

<td data-title="'Birth Date'" filter="{birthDate: 'date.html'}">{{row.birthDate}}</td>

如您所见，应该创建 date.html .

更多信息:ng-table

Note: <script type="text/ng-template" id="date.html"></script> not work in stackoverflow.com

<script type="text/ng-template" id="date.html">
   <input type="date" name="{{name}}" ng-disabled="$filterRow.disabled" ng-model="params.filter()[name]" placeholder="MM-dd-yyyy" />
</script>

(function() {
  var app = angular.module("myApp", ["ngTable"]);
  app.controller("demoController", demoController);
  
  function demoController(NgTableParams) {
  //MM-dd-yyyy
   var simpleList = [{
    "name": "Mark",
    "birthDate": "02-23-1999",
    "age": "17"
   },{
    "name": "Jose",
    "birthDate": "02-14-1997",
    "age": "21"
   },{
    "name": "Noel",
    "birthDate": "06-26-2000",
    "age": "17"
   },{
    "name": "Pankhar",
    "birthDate": "03-24-1999",
    "age": "18"
   }];
    this.tableParams = new NgTableParams({}, {
      dataset: simpleList
    });
    this.nameFilter = {
      name: {
        id: 'text',
        placeholder: 'Filter by name'
      }
    };
    this.birthDayFilter = {
      birthDate: {
        id: 'text',
        placeholder: 'MM-dd-yyyy'
      }
    };
    this.ageFilter = {
      age: {
        id: 'number',
        placeholder: 'Filter by age'
      }
    };
  }
})();

<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<div ng-app="myApp" ng-controller="demoController as demo">
  
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
 <tbody ng-repeat="row in $data track by $index">
  <tr>
    <td data-title="'Name'"  filter="demo.nameFilter">{{row.name}}</td>
    <td data-title="'Birth Date'" filter="{birthDate: 'date.html'}">{{row.birthDate}}</td>
    <td data-title="'Age'" filter="demo.ageFilter">{{row.age}}</td>
  </tr>
 </tbody>
</table>
</div>