AngularJS函數

所以我對Javascript和AngularJS都很陌生，我試着做一個小遊戲。經過一段時間，我設法創建了一些變量並將它們顯示在我的html中，但現在我想用按鈕來更新這些變量。AngularJS函數

我搜索了網頁，發現我可以用ng-click來做到這一點。我的html文件;

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
    <div ng-app="myApp" ng-controller="gameController"> 
     <table style="width:400px"> 
      <tr> 
       <td><div id = "00"></div></td> 
       <td><div id = "01"></div></td> 
       <td><div id = "02"></div></td> 
       <td><div id = "03"></div></td> 
       <td></td> 
       <td rowspan = "5" id = "wordTable"></td> 
      </tr> 
      <tr> 
       <td><div id = "10"></div></td> 
       <td><div id = "11"></div></td> 
       <td><div id = "12"></div></td> 
       <td><div id = "13"></div></td> 
      </tr> 
      <tr> 
       <td><div id = "20"></div></td> 
       <td><div id = "21"></div></td> 
       <td><div id = "22"></div></td> 
       <td><div id = "23"></div></td> 
      </tr> 
      <tr> 
       <td><div id = "30"></div></td> 
       <td><div id = "31"></div></td> 
       <td><div id = "32"></div></td> 
       <td><div id = "33"></div></td> 
      </tr> 
      <tr> 
       <td><button ng-click="startTimer()">Start Game</button></td> 
       <td><button ng-click="addScore()">Submit</button></td> 
       <td><span> {{count + " : Seconden"}}</span></td> 
       <td><span> {{"Score: " + score}}</span></td> 
      </tr> 
     </table> 
    </div> 
</body>

的script.js

var app = angular.module('myApp', []); 
app.controller('gameController', function($scope) { 

$scope.count= 180; 
$scope.score= 0; 

$scope.addScore = function(){ 
    $scope.score++; 
}; 
$scope.startTimer = function(){ 
    $scope.count--; 
}; 
});

出於某種原因，這似乎並沒有工作，我一直在試圖找出爲什麼在過去的2個小時左右。變量顯示爲他們應該但功能不做任何事情。

和樣式表，雖然我不認爲這是問題;

div { 
height:100px; 
width:100px; 
display: inline-block; 
background-color:#0000FF; 
border-radius: 5px; 
} 
.onclick { 
background-color:#E2BE22; 
} 
th,td { 
padding: 3px; 
} 
h1 { 
color: #FFFFFF; 
text-align: center; 
vertical-align: middle; 
line-height: 50px; 
}

我真的很希望有人能幫助我。

來源

2015-09-13 mcNuggetsplays

函數根本沒有運行，或者它的變量在運行時沒有更新？ – Chrillewoodz

它的工作原理：http://jsfiddle.net/michelem09/x8Lanhrk/檢查您的調試控制檯是否有錯誤 –

您的代碼似乎正常工作 - [plunker]（http://plnkr.co/edit/XLhwexiBQ0MR9gbVbSlO?p=preview） – Daniel

它的工作（運行此片段）！

<head> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/> 
 
    <script type="text/javascript"> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('gameController', function($scope) { 
 

 
     $scope.count= 180; 
 
     $scope.score= 0; 
 

 
     $scope.addScore = function(){ 
 
     $scope.score++; 
 
     }; 
 
     
 
    $scope.startTimer = function(){ 
 
     $scope.count--; 
 
    }; 
 
}); 
 
    </script> 
 
</head> 
 
<body> 
 
    <div ng-app="myApp" ng-controller="gameController"> 
 
     <table style="width:400px"> 
 
      <tr> 
 
       <td><div id = "00"></div></td> 
 
       <td><div id = "01"></div></td> 
 
       <td><div id = "02"></div></td> 
 
       <td><div id = "03"></div></td> 
 
       <td></td> 
 
       <td rowspan = "5" id = "wordTable"></td> 
 
      </tr> 
 
      <tr> 
 
       <td><div id = "10"></div></td> 
 
       <td><div id = "11"></div></td> 
 
       <td><div id = "12"></div></td> 
 
       <td><div id = "13"></div></td> 
 
      </tr> 
 
      <tr> 
 
       <td><div id = "20"></div></td> 
 
       <td><div id = "21"></div></td> 
 
       <td><div id = "22"></div></td> 
 
       <td><div id = "23"></div></td> 
 
      </tr> 
 
      <tr> 
 
       <td><div id = "30"></div></td> 
 
       <td><div id = "31"></div></td> 
 
       <td><div id = "32"></div></td> 
 
       <td><div id = "33"></div></td> 
 
      </tr> 
 
      <tr> 
 
       <td><button ng-click="startTimer()">Start Game</button></td> 
 
       <td><button ng-click="addScore()">Submit</button></td> 
 
       <td><span> {{count + " : Seconden"}}</span></td> 
 
       <td><span> {{"Score: " + score}}</span></td> 
 
      </tr> 
 
     </table> 
 
    </div>

來源

2015-09-13 15:08:01

謝謝，你是對的，它的工作。發現樣式表弄亂了整個事情，出於某種奇怪的原因：S – mcNuggetsplays

找到了錯誤，將CSS應用於所有div，但我忘了我在頂層創建了一個新的。 – mcNuggetsplays

代碼工作，但如果你想開始倒計時你應該是這樣的改變：

JSFiddle

HTML：

<button ng-click="startTimer()" ng-disabled="scoreStart">Start Game</button>

JS：

$scope.scoreStart = false; 

$scope.startTimer = function(){ 
    $scope.scoreStart = true; 
    $interval(function() { $scope.count--; }, 1000); 
};

來源

2015-09-13 15:11:19

實際上，您不需要角度控制器中的任何代碼，因爲您可以使用「ng-init」和角度表達式來實現您的要求。

 <div ng-app="myApp" ng-init="count=180;score=0"> 

      //. your template 

      <td><span> {{count - 1 + " : Seconden"}}</span></td> 
      <td><span> {{"Score: " + score + 1}}</span></td>

來源

2015-09-13 18:05:41

回答

相關問題