如何将datepicker放置在angularjs中的ng-table的过滤器属性中?这可能吗?任何可以帮助我的人。预先感谢那些善良的人!对不起我的菜鸟问题。
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>
您可以使用自定义过滤模板
<td data-title="'Birth Date'" filter="{birthDate: 'date.html'}">{{row.birthDate}}</td>
如您所见,应创建date.html
。
更多信息:ng-table
注意:
中不起作用<script type="text/ng-template" id="date.html"></script>
在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>