Angular ng-repeat in a ul needs to skip a specific entry

I have a simple dropdown that lists the available languages. The page starts in a default language and the user may select from the list.

The list is held in a JSON array and there is a scope variable to holds the currently selected language (being the default language upon start).

The dropdown (ul) is built using ng-repeat over the JSON, so the code would look:

<li ng-repeat="On_Lang in All_Langs"...>

Now, I want to skip the language that is currently being selected. For instance, if the list contains EN, FR, ES, PO, ZU and the current language is PO, when dropping the list it would show EN, FR, ES, ZU. If I select ES, it will be removed from the list and PO will appear.

I thought of adding an ng-if to the li but that is where the loop is taking place.

Solution

Since you didn't provide any code it's a bit hard to see what's your structure or anything, but for sure you can create a custom filter to "exclude" the selected option.

I made a simple demo and it should point you to the right direction, take a look:

(function() {
  'use strict';
  angular.module('app', [])
    .controller('mainCtrl', function() {
      var vm = this;

      vm.languages = ["EN", "FR", "ES", "PO", "ZU"];
    })

    .filter('customFilter', function() {
      return function(items, choice) {
        if (!choice) {
          return items;
        }
        return items.filter(function(element) {
          return element !== choice;
        });
      }
    });
})();

<!DOCTYPE html>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
</head>

<body ng-controller="mainCtrl as main">
  <select ng-options="language for language in main.languages" ng-model="main.selectedLang">
    <option value="" label="Select the language"></option>
  </select>
  <ul>
    <li ng-repeat="language in main.languages | customFilter: main.selectedLang track by $index" ng-bind="language"></li>
  </ul>
</body>

</html>