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