Hide element if condition is true

Question

I have a directive which should allow me to change a specific mode, updating the scope as well.

This works fine.

The issue I'm facing now is that I need to be able to hide the element for the current mode.

I'll explain it better:

I have modes array:

[1,2,3,4,5]

and some links inside an 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>

what I have to do is hide an element if selectedZone is not equal to m:

ng-if="selectedMode!=m"

It seams like everything is fine doing this, but it is not.

You can clearly see what's the problem from this live example

Basically, everytime the condition is meet, it removes the element and never put it back.

I also tried with ng-show, but the result is not good either as it leaves an empty spot (you can check this other example)

Any suggestions? Thanks

EDIT

Trying to use the filter as suggested, but with no luck:

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

score 1 · Answer 1 · answered May 03 '16 at 15:18

1

Have you tried using a filter on your ng-repeat? If you use a filter your element is not lost, changing the value of m will show it again. Try something like this:

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

Then in your controller you need to make a filter:

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

answered May 03 '16 at 15:18

Jordan.J.D

7,999
11
48
78

If you use this method you need to remove your `ng-if` again. – Massimo Rosin May 03 '16 at 15:26
I'm trying to use the filter, but with no luck please see the edited question – Nick May 03 '16 at 15:29
@Nick , is it possible to make a demo of it that i may edit? the `checkM` function might have to return a function that returns mode==m – Jordan.J.D May 03 '16 at 15:35

score 0 · Answer 2 · answered May 03 '16 at 15:16

0

I might not quite understand your question but is ng-if="selectedMode!='m'" giving you the result you want?

answered May 03 '16 at 15:16

Massimo Rosin

163
1
13

except for the fact that when I change mode (for example from 1 to 2) i don'0t want 2 to be displayed, but I want 1 to be added...basically there should always be 4 icons (four different modes) but the missing one should be the selected – Nick May 03 '16 at 15:17
If i select facebook, I want to being able to see twitter, twich, vine and vk, if i select twitter, i wanna be able to see facebook, twich, vine, vk and so on.. – Nick May 03 '16 at 15:18
I tried Jordan.J.D's solution and I think that this is exactly what you want. – Massimo Rosin May 03 '16 at 15:25

score 0 · Accepted Answer · answered May 04 '16 at 10:32

At the end , I managed to solve this using a filter, and here's the final 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;
        }
    });

and it is now working as expected.

Hide element if condition is true

3 Answers3