CODEWITHSUNDEEP
angularjs
jobe
jobe

Reputation: 325

Ng-show not updated in ng-repeat

I have two lists of data which are displayed depending of a selected value (language). When i change the language, ng-show is not updating correctly.

I already tried to call $scope.apply() but it doesn't work.

Here is a plunkr

$scope.languageChanged = function() {
  console.log('change' + vm.currentLanguage);
  $scope.$apply();
}

Upvotes: 2

Views: 257

Answers (3)

dfsq
dfsq

Reputation: 193251

@Hugo Wood is correct with the solution for ngShow problem. I can propose one more solution which might be a little bit cleaner. You can to use filters to render necessary items in the first place instead of hiding/showing:

<h1>Selected</h1>
<div ng-repeat="translation in vm.translations | filter:{language: vm.currentLanguage}">
  <div>{{translation.language}}:
    <input ng-model="vm.translations[$index].text" /> show: {{translation.language === vm.currentLanguage}} 
  </div>
</div>
<br />
<br />
<h1>Not Selected</h1>
<div ng-repeat="translation in vm.translations | filter:{language: '!' + vm.currentLanguage}">
  <div>{{translation.language}}:
    <input ng-model="vm.translations[$index].text" /> show:{{translation.language !== vm.currentLanguage}} 
  </div>
</div>

Demo: http://plnkr.co/edit/F35yrDv9HcV6hChIDBkZ?p=preview

Upvotes: 3

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

You need to change the way you are providing the expression to ng-show. Remove the '{{' and try. Here is an updated plunkr on top of what you provider.

<div ng-repeat="translation in vm.translations" ng-show="translation.language === vm.currentLanguage">

<div ng-repeat="translation in vm.translations" ng-show="translation.language !== vm.currentLanguage">

Upvotes: 2

Hugo Wood
Hugo Wood

Reputation: 2260

ng-show expects an expression, not a string, so you don't need the interpolation double braces.

Incorrect: ng-show="{{translation.language === vm.currentLanguage}}"

Correct: ng-show="translation.language === vm.currentLanguage"

Upvotes: 4

Related Questions