Ng-repeat不更新视图

时间:2017-09-16 19:42:54

标签: javascript html angularjs

我已经阅读了一些有类似问题的人的多个问题主题,但他们并没有解决我的问题。

这是完整的代码(不包括CSS部分:

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

经过调试,似乎posx和posy值正在更新,但屏幕上的图像保持不变。我似乎无法找到问题所在。如果有人可以帮助我,我将非常感激。

2 个答案:

答案 0 :(得分:1)

{{}}

中删除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

答案 1 :(得分:1)

ng-show="{{testeshow($index)}}"更改为ng-show="testeshow($index)"ng-show需要一个表达式。