如果條件爲真，則隱藏元素

Question

我有一個指令，應該允許我更改特定的模式，並更新範圍。

這工作正常。

我現在面臨的問題是我需要能夠隱藏當前模式的元素。

我會更好地解釋它：

我有模式陣列：

[1,2,3,4,5] 

和NG-中繼器裏面的一些鏈接：

<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-秀，但結果也不好，因爲它留下的空白點（你可以檢查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

最後，我管理這個使用過濾器，和這裏的最終代碼來解決：

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

它現在按預期工作。

Answer 2

我可能不太懂問題，但是ng-if="selectedMode!='m'"給你你想要的結果？

Answer 3

您是否試過在您的ng-repeat上使用filter？如果你使用過濾器，你的元素不會丟失，改變m的值會再次顯示它。嘗試是這樣的：

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

然後在你的控制器，你需要做一個過濾器：

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