我想使用复选框显示免费事件
这是我的代码
<body ng-app="myApp">
<input ng-click="showFreeEvents()" ng-model="showFreeEvent" value="" type="checkbox" />
<div ng-controller="myCtrl">
<div ng-repeat="o in data">
<span>{{o.eventName}}</span></br>
<span>{{o.eventStartDateTime}}</span></br>
<span>{{o.itemCreatedDateTime}}</span></br>
</br></br>
</div>
</div>
</body>
var app = angular.module('myApp', []);
app.controller('myCtrl',function($scope,$window){
$scope.data=[{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'ANew Event','itemCreatedDateTime': '3/04/2019 5:17:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 02:43 PM','eventName': 'AFeatured Event 3','itemCreatedDateTime': '2/04/2019 1:54:10 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:30 PM','eventName': 'Event 9','itemCreatedDateTime': '2/04/2019 1:29:56 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Featured Event 2','itemCreatedDateTime': '28/03/2019 4:59:13 AM',},{'eventStartDateTime': 'Tue, 02 April 2019, 12:55 PM','eventName': 'Featured Event 4','itemCreatedDateTime': '28/03/2019 4:58:54 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:30 AM','eventName': 'Avent 5','itemCreatedDateTime': '28/03/2019 1:29:06 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 05:30 AM','eventName': 'Event 4','itemCreatedDateTime': '28/03/2019 1:29:00 AM',},{'eventStartDateTime': 'Fri, 29 March 2019, 04:00 AM','eventName': 'Event 3','itemCreatedDateTime': '28/03/2019 1:28:54 AM',},{'eventStartDateTime': 'Thu, 21 March 2019, 04:30 AM','eventName': 'Event 2','itemCreatedDateTime': '28/03/2019 1:28:41 AM',},{'eventStartDateTime': 'Thu, 28 March 2019, 04:00 AM','eventName': 'Event 1','itemCreatedDateTime': '28/03/2019 1:28:36 AM',}];
$scope.showFreeEvents = function () {
var found = false;
var isYes = $scope.showFreeEvent == true ? 'Yes' : 'No';
console.log(isYes);
if (isYes == 'Yes') {
$scope.data = $scope.data.filter(function (el) {
if (el.eventName != 'Event 9') {
found = false;
}
});
}
if (isYes == 'No') {
$scope.data = $scope.data.filter(function (el) {
if (el.eventName == 'Event 9') {
found = true;
}
});
}
}
});
选中复选框后，它应该只显示事件 9
如有任何帮助或建议，我们将不胜感激。
提前致谢
最佳答案
这是一个更新版本...基本上我们正在创建一个过滤器，以便您可以限制返回的结果
<input ng-model="showFreeEvent" value="" type="checkbox" />
<div ng-controller="myCtrl">
<div ng-repeat="o in data | filter:filterFreeEvents">
.....
代码相关
$scope.filterFreeEvents = function(el) {
if (!$scope.showFreeEvent) {
return true;
}
if (el.eventName != 'Event 9') {
return false;
}
return true;
};
fiddle :https://jsfiddle.net/1xdfLq26/
关于javascript - 如何通过 AngularJS 复选框进行过滤？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55507079/