Question

我正在我的rails应用程序中创建一个简单的角度应用程序，以显示注册用户列表。目标最终是循环遍历所有用户并选择一个随机的用户，将他们的“胜利者”属性更新为“真实”，并在他们名字旁边的DOM上更新，或者可能是一个警告以显示获胜者。

我创建了一个新的测试函数“showPool”来查看ngClick是否正常工作，但它似乎根本不工作（I.E.点击按钮，它们什么都不做）。任何人都可以看到我可能会失踪的东西吗？

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文件：

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

您需要将按钮放在启动rafflerController控制器的div范围内：

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

Rails / Angular JS：Ngclick看起来不起作用

1 个答案: