Rails/Angular JS: Ngclick scheint nicht zu funktionieren

Question

Ich erstelle eine einfache eckige App in meiner Rails-App, um eine Liste der registrierten Benutzer anzuzeigen. Das Ziel wird schließlich sein, alle Benutzer einfach durchzuschleifen und eine zufällige auszuwählen, ihr Attribut von "Gewinner" auf "wahr" zu aktualisieren und auf dem DOM neben ihrem Namen oder vielleicht einer Warnung zu aktualisieren, um den Gewinner zu zeigen.

Ich habe eine neue Testfunktion "showPool" erstellt, um zu sehen, ob ngClick funktioniert, aber es scheint überhaupt nicht zu funktionieren (I. E. klicke auf die Knöpfe und sie tun nichts). Kann jemand sehen, was ich vermisse?

HTML:

<% if user_signed_in? && current_user.role == "Admin" %> 

    <h1 class="center">Winner Raffler</h1> 
    <h4 class="center">To select a winner for this year's scholarship, simply click "choose winner" below</h4> 

    <div ng-controller="rafflerController"> 
     <ul> 
      <li ng-repeat="user in users"> 
       {{"Applicant Name:" + " " + user.first_name + " " + user.last_name + " " + "Winner?" + user.winner}} 
       <span ng-show="user.winner">Winner</span> 
      </li> 
     </ul> 

    </div> 
<button ng-click="drawWinner()">Draw Winner</button><br> 
<button ng-click="showPool()">Show List of Potential Winners </button> 
<% end %> 

Javascript Datei:

//Pool of Winners 
var pool = []; 

var rafflerApp = angular.module('rafflerApp', ["ngResource"]); 

rafflerApp.controller('rafflerController', function($scope, $resource) { 
     User = $resource("/users.json", {id: "@id"}, {update: {method: "GET", isArray:true}}) 
     $scope.users = User.query() 

     //Show User Pool List 
     $scope.showPool = function() { 
      if (pool.length === 0) { 
       alert("There are currently no available users in pool."); 
      } else { 
       alert("There are currently" + pool.length + " potential winners in the user pool."); 
      } 
     } 

     //Draw a New Winner 
     $scope.drawWinner = function(){ 
      angular.forEach($scope.users,function(user){ 
       if(!user.winner){ 
        pool.push(user) ; 
       } 
      }); 
      if(pool.length >0) { 
       user = pool[Math.floor(Math.random()*pool.length)]; 
       user.winner = true; 
       $scope.lastWinner = user; 
      } 
     } 

}); 

Answer 1

Sie benötigen Tasten im Rahmen Ihres div zu stellen, dass Sie die rafflerController Controller initiieren mit:

<div ng-controller="rafflerController"> 
    <ul> 
     <li ng-repeat="user in users"> 
      {{"Applicant Name:" + " " + user.first_name + " " + user.last_name + " " + "Winner?" + user.winner}} 
      <span ng-show="user.winner">Winner</span> 
     </li> 
    </ul> 
//YOUR CODE GOES HERE INSTEAD 
<button ng-click="drawWinner()">Draw Winner</button><br> 
<button ng-click="showPool()">Show List of Potential Winners</button> 

</div>