CODEWITHSUNDEEP
javascripthtmlangularjs
Augusto Chies
Augusto Chies

Reputation: 23

Ng-repeat not updating view

I have read multiple question threads from people with a simmilar issue but they didn't solve my problem.

This is the full code(Exluding the CSS portion:

 <script>                                       

   var app = angular.module("game", []);
   app.controller("controlematrix",function($scope)
        {   
            $scope.undo = [];
            $scope.matriz = [ 2,2,2,2,2,2,2
                             ,2,2,2,0,0,0,2
                             ,2,3,0,0,0,0,2
                             ,2,0,0,0,0,0,2                    
                             ,2,3,0,0,2,0,2
                             ,2,0,0,0,0,0,2  
                             ,2,2,2,2,2,2,2];

            $scope.posx = 5;
            $scope.posy = 3;

            $scope.testeshow= function(atual){                  
                return (($scope.posx + $scope.posy * 7) != atual);  
            }

            $scope.up = function() {
                if($scope.matriz[$scope.posx + ($scope.posy-1) * 7] != 2)
                {
                    $scope.posy--;
                }
            }
            $scope.down = function() {
                if($scope.matriz[$scope.posx + ($scope.posy+1) * 7] != 2)
                {
                    $scope.posy++;
                }
            }
            $scope.left = function() {
                if($scope.matriz[($scope.posx-1) + $scope.posy * 7] != 2)
                {
                    $scope.posx--;
                }
            }
            $scope.right = function() {
                if($scope.matriz[($scope.posx+1) + $scope.posy * 7] != 2)
                {
                    $scope.posx++;
                }
            }

        });
</script>


<div id="everything" ng-app="game" ng-controller="controlematrix" >
    <div id="container">
        <div class="item" ng-repeat= "x in matriz track by $index">
            <img ng-src="{{'tile' + x +'.png'}}"  alt="tile" ng-show= "{{testeshow($index)}}"> 
            <img ng-src="player.png"  alt="player" ng-show= "{{!testeshow($index)}}"> 
        </div>
    </div>
    <div id="buttonscreen">
        <button class="botao" ng-click="up()">UP</button>
        <button class="botao" ng-click="down()">DOWN</button>
        <button class="botao" ng-click="left()">LEFT</button>
        <button class="botao" ng-click="right()">RIGHT</button>

    </div>

</div>

After debugging, it seems the posx and posy values are updating like they should but the image onscreen stays the same.I can't seem to find where the problem is. If someone can help I'll be very grateful.

Upvotes: 0

Views: 43

Answers (2)

user125661
user125661

Reputation: 1568

Change ng-show="{{testeshow($index)}}" to ng-show="testeshow($index)". ng-show expects an expression.

Upvotes: 1

Maxim Shoustin
Maxim Shoustin

Reputation: 77930

Remove {{}} from ng-show

<img ng-src="{{'tile' + x +'.png'}}"  alt="tile" 
     ng-show= "testeshow($index)"> 
<img ng-src="player.png"  alt="player" 
     ng-show= "!testeshow($index)">

Demo

Upvotes: 1

Related Questions