如果条件为真则隐藏元素

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

我可能不太理解你的问题，但是 ng-if="selectedMode!='m'" 是否给了你想要的结果？

Answer 2

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

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

然后在你的控制器中你需要做一个过滤器：

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

Answer 3

最后，我设法使用过滤器解决了这个问题，这是最终代码：

angular.module('App', ['ionic'])

.controller('ctrl', ['$scope', function($scope) {
  $scope.current = {
    'id': 0,
    'mode': 1
  }
}])

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

.filter('abc', function() {
        return function( m, sel ) {
          console.log('abc',arguments);
          var filteredModes = [];
          angular.forEach(m, function(mode) {
          if( sel != mode ) {
              filteredModes.push(mode);
            }
          });
          return filteredModes;
        }
    });

它现在按预期工作。

如果条件为真则隐藏元素

Hide element if condition is true

css

angularjs

angularjs-directive

angular-ng-if

angularjs-ng-show