Hide element from loop (AngularJS)

Question

I've got this code:

AngularJS:

$scope.languages = [
  { language: "English", i18n: "en" },
  { language: "Espanol", i18n: "es" },
  { language: "Polski", i18n: "pl" },
  { language: "Portugues", i18n: "pt" },
  { language: "Svenska", i18n: "se" },
];

HTML:

<li ng-repeat="lang in languages" id="langRow_{{lang.i18n}}">
  <a href="#" id="lang_{{lang.i18n}}" ng-click="changeLang(lang.i18n);"><i class="flag-icon flag-icon-{{lang.i18n}} mr-sm"></i>{{lang.language}}</a>
</li>

and I want to hide an element from loop, for example:

$("#langRow_es").hide();

It doesn't work. How to solve this?

Answer 1

1) If you want to use Angular, FORGET JQUERY.

2) USE ANGULAR.

Try this :

<li ng-repeat="lang in languages" ng-hide="lang.i18n=='es'" >

Answer 2

No Need Of Using Id Operation Here. But U can use "ng-if" also if we do not want to render the element completely inorder to hide. So we will see all languages other than english.

<li ng-repeat="lang in languages" ng-if="lang.i18n !=='es'"> <a href="#" id="lang_{{lang.i18n}}" ng-click="changeLang(lang.i18n);"><i class="flag-icon flag-icon-{{lang.i18n}} mr-sm"></i>{{lang.language}}</a> </li>