Angularjs expression checking for "in array"

Question

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

Answer 1

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>