Element verbergen, wenn Bedingung wahr ist

Question

Ich habe eine Direktive, die es mir erlauben sollte, einen bestimmten Modus zu ändern und den Bereich zu aktualisieren.

Das funktioniert gut.

Das Problem, mit dem ich jetzt konfrontiert bin, ist, dass ich das Element für den aktuellen Modus ausblenden muss.

Ich werde es besser erklären:

Ich habe Modi Array:

[1,2,3,4,5] 

und einige Links innerhalb eines 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> 

, was ich tun muss, ist verstecken ein Element wenn selectedZone ist nicht gleich m:

ng-if="selectedMode!=m" 

Es scheint, als ob alles in Ordnung ist, aber das ist es nicht.

Man kann deutlich sehen, was ist das Problem von this live example

Grundsätzlich jedes Mal ist die Bedingung erfüllt, entfernt es das Element und es nie wieder einsetzen.

ich auch mit ng-Show versucht, aber das Ergebnis ist nicht gut, entweder als es eine leere Stelle verlässt

Irgendwelche Vorschläge (Sie können this other example überprüfen)? Dank

EDIT

Der Versuch, den Filter zu verwenden, wie vorgeschlagen, aber ohne Glück:

.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

Am Ende gelang es mir, das unter Verwendung eines Filters zu lösen, und hier ist der endgültige Code:

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

und es funktioniert jetzt wie erwartet.

Answer 2

ich vielleicht nicht ganz verstehe Ihre Frage aber ist ng-if="selectedMode!='m'" Ihnen das gewünschte Ergebnis?

Answer 3

Haben Sie versucht, eine filter auf Ihrem ng-repeat? Wenn Sie einen Filter verwenden, geht Ihr Element nicht verloren, wenn Sie den Wert von m ändern, wird es erneut angezeigt. so etwas wie dieses versuchen:

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

Dann in Ihrem Controller Sie einen Filter machen müssen:

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