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

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

ng-repeat

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

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

Answer 2

我可能不太明白你的问题，但是ng-if="selectedMode!='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;
        }
    });

现在正按预期工作。

如果条件为真，则隐藏元素

3 个答案: