css - 如果条件为真则隐藏元素

Question

我有一个指令应该允许我更改特定模式，同时更新范围。

这很好用。

我现在面临的问题是我需要能够隐藏当前模式的元素。

我会更好地解释它:

我有模式数组:

[1,2,3,4,5]

以及 ng-repeater 中的一些链接:

<a href=""
   ng-repeat="m in zoneModes"
   ng-click="changeZoneMode({{m}})"
   id="{{m}}"
   class="menu-item">
    <i class="icon-mode-{{m}}"></i>
</a>

如果 selectedZone 不等于 m，我要做的是隐藏一个元素:

ng-if="selectedMode!=m"

这样做似乎一切都很好，但事实并非如此。

从this live example可以很清楚的看出是什么问题

基本上，每次满足条件时，它都会删除该元素并且永远不会将其放回原处。

我也试过 ng-show，但结果也不好，因为它留下了一个空白点(你可以检查 this other example )

有什么建议吗？谢谢

编辑

尝试按照建议使用过滤器，但没有成功:

.directive('mySelector', function() {
  var changeMode, linkFunction;

  changeMode = function(newmode) {
    var $scope;
    $scope = this.$parent;
    $scope.selectedMode = newmode;
    $('.menu-open').attr('checked', false);
  };
  linkFunction = function(scope, element, attrs) {
    scope.changeMode = changeMode;
    scope.changeZoneMode = changeMode;
    scope.zoneModes = [1, 2, 3, 4, 5];

    return scope.$watch((function() {
      return scope.selectedMode;
    }), function(newMode) {
      return scope.selectedMode = newMode;
    });
  };

  return {
    restrict: 'E',
    scope: {
      selectedMode: '=currentmode',
      id: '@id'
    },
    replace: true,
    templateUrl: 'templates/template.html',
    link: linkFunction,
    controller: 'abc'
  };
}).controller('abc', ['$scope', function($scope) {
  $scope.checkM = function (mode, m) {
    return mode == m;
  };
}])

template.html

<a href=""
   ng-repeat="m in zoneModes|filter:checkM(selectedMode,m)"
   ng-click="changeZoneMode({{m}})"
   id="{{m}}"
   class="menu-item">
    <i class="icon-mode-{{m}}"></i>
</a>

Answer 1

您是否尝试过使用 filter 在你的 ng-repeat 上？如果您使用过滤器，您的元素不会丢失，更改 m 的值将再次显示它。尝试这样的事情:

ng-repeat="m in zoneModes|filter:checkM(selectedMode,m)"

然后在你的 Controller 中你需要做一个过滤器:

$scope.checkM = function (mode, m) {
    return mode == m;
};