使用 Angular ng-repeat 过滤器返回隐藏对象答案

【问题标题】：Returning hidden object with Angular ng-repeat filter使用 Angular ng-repeat 过滤器返回隐藏对象
【发布时间】：2014-12-27 00:24:33
【问题描述】：

我正在尝试显示组的第一个值并隐藏 ng-repeat 中的所有其他类似值。我正在让 if/else 工作，但它实际上将“false”作为字符串返回。这是我目前所拥有的。

app.filter('dateSort', function() {
  var prevVal = null;
  return function(input) {
    if (prevVal !== input.uniquedate) {
      prevVal = input.uniquedate;
      return moment(input.jsdatetime).format('dddd,\n MMMM Do');
    } else {
      return false;
    }
  };

});

我也尝试过将此作为指令，但没有成功。

app.directive('hideon', function() {
var prevVal = $index[-1].uniquedate;
return function(scope, element, attrs) {
    scope.$watch(attrs.hideon, function(value, oldValue) {
        if(element.uniquedate !== prevVal) {
            element.show();
        } else {
            element.hide();
        }
    }, true);
}

});

感谢任何帮助。我假设最好的方法是使用指令。对于带有返回对象（包括 false）的过滤器本身，在我对任何数据进行排序后，这些值不成立。那是我开始尝试将它与 $watch 一起使用的时候。

这是我开始使用的 Codepen-http://codepen.io/drewbietron/pen/dKjhe

【问题讨论】：

ngHide/ngShow/ngIf 不起作用吗？
@TheSharpieOne 我已经尝试了多个版本，但均未成功。过滤器功能有效，但在调用过滤器后不会更新。我还需要该元素从 DOM 中完全消失，因为该元素具有 CSS 填充 - 一个空白框仍然显示没有内容。

标签： angularjs filter directive watch

【解决方案1】：

这是对空白框显示的修复。

app.filter('uniqueDate', function() {
 var prevVal = null, prevSeq = null;
 return function(input, seq) {
   input.show = false;
   if (prevVal !== input.month || prevSeq == seq-1) {
     prevVal = input.month;
     input.show = true;
     return input.day + " " + input.month;
   }
 };
});

已更改代码以过滤选择类型的事件。

      var selectedTypes = ["Math", "Science", "Writing"];
      $scope.updateSelectedTypes = function(type){
        var found = _.some(selectedTypes, function(selType){
          return selType == type;
        });
        if(!found){
          selectedTypes.push(type);
        }
        else{
          selectedTypes = _.difference(selectedTypes, type);
        }
        filterEvents();
      };

      var filterEvents = function(){
        var result = _.filter(Events, function(event){
          return _.some(selectedTypes, function(type){
            return event.type == type;
          });
        });

        result = _.each(result, function(item){
          item.show = false;
        });
        $scope.events = angular.copy(result);
      };

HTML：

<li><b>Filter By:</b></li>
<li class="filter" ng-click="updateSelectedTypes('Math')" ng-class="{ active: Math }">Math</li>
<li class="filter" ng-click="updateSelectedTypes('Science')" ng-class="{ active: Science }">Science</li>
<li class="filter"  ng-click="updateSelectedTypes('Writing')" ng-class="{ active: Writing}">Writing</li>
<input type="search" ng-model="instructor.instructor" placeholder="Search By Instructor..." />

这是更新后的代码笔link

【讨论】：

抱歉耽搁了，昨天没能花时间。