Question

我想使用复选框显示免费活动

这是我的代码

<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;
                    }
                });
            }
        }

});

JSfiddle

选中一个复选框后，它应该只显示Event 9

任何帮助或建议将不胜感激。

预先感谢

Answer 1

这是一个更新的版本...基本上，我们正在创建一个过滤器，以便您可以限制返回的结果

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

提琴：https://jsfiddle.net/1xdfLq26/

Answer 2

在div中移动用于实例化控制器的复选框：

<body ng-app="myApp">
   ̶<̶i̶n̶p̶u̶t̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶s̶(̶)̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶s̶h̶o̶w̶F̶r̶e̶e̶E̶v̶e̶n̶t̶"̶ ̶v̶a̶l̶u̶e̶=̶"̶"̶ ̶t̶y̶p̶e̶=̶"̶c̶h̶e̶c̶k̶b̶o̶x̶"̶ ̶/̶>̶

  <div ng-controller="myCtrl">

    <input ng-change="showFreeEvents()" ng-model="showFreeEvent"
           value="" type="checkbox" />

    <div ng-repeat="o in data">
      <span>{{o.eventName}}</span><br>
      <span>{{o.eventStartDateTime}}</span><br>
      <span>{{o.itemCreatedDateTime}}</span><br>
    </div>

  </div>

</body>

也使用ng-change指令代替ng-click。

有关更多信息，请参见

如何通过AngularJS复选框进行过滤？

2 个答案: