angularjsng-show

Angularjs expression checking for "in array"


I'm looking for the smoothest way to do something like this:

<span x-ng-show="stuff && stuff.id in [1,2,5]">{{stuff.name}}</span>
<span x-ng-show="stuff && stuff.id in [3,4,6]">{{stuff.fullName}}</span>

I know this is not working in AngularJS, but I hope you understand what I'm trying to do. What is the best readable solution for this?

Unfortunately, I needed a solution that also works in IE11


Solution

  • If I understand you correctly, it should be a simple check if an array contains something

    [1,2,5].includes(stuff.id)
    

    Working example

    angular.module('app', [])
    .controller('ctrl', function($scope) {
      $scope.stuff = {
        id: 5,
        name: 'foo'
      }
      
      $scope.toggle = function() {
        $scope.stuff.id = $scope.stuff.id === 5 ? 8 : 5;
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <div ng-app="app" ng-controller="ctrl">
    <span x-ng-show="stuff && [1,2,5].includes(stuff.id)">{{stuff.name}}</span>
    <button ng-click="toggle()">Toggle id between 5 and 8</button>
    <pre>stuff.id = {{stuff.id}}</pre>
    </div>

    For < IE11

    angular.module('app', [])
    .controller('ctrl', function($scope) {
      $scope.stuff = {
        id: 5,
        name: 'foo'
      }
      
      $scope.toggle = function() {
        $scope.stuff.id = $scope.stuff.id === 5 ? 8 : 5;
      }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
    <div ng-app="app" ng-controller="ctrl">
    <span x-ng-show="stuff && [1,2,5].indexOf(stuff.id) > -1">{{stuff.name}}</span>
    <button ng-click="toggle()">Toggle id between 5 and 8</button>
    <pre>stuff.id = {{stuff.id}}</pre>
    </div>