条件が真である場合に要素を隠す

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> 

がhideです選択されている場合は要素がmと等しくない：

ng-if="selectedMode!=m" 

これはすべてのような縫い目はこれを行う上質ですが、そうではありません。

あなたは明確にthis live example

からの問題は基本的には、毎回条件は満たしているだ、それは要素を削除し、戻ってそれを置くことはありませんかを見ることができます。

私もNG-ショーでみましたが、結果は良好ではないのいずれか、それは何もない場所を離れるよう

任意の提案（あなたがthis other exampleを確認することができますか）？おかげで示唆したように、フィルタを使用しようと

EDIT

、ない運で：

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