使用ng-repeat提供多個按鈕

我試圖用ng-repeat創建一個按鈕列表，每個按鈕都可以被點擊以執行相同的功能，在這種情況下，滾動一個die。我如何得到它，以便每個按鈕都有自己對結果的唯一引用？目前，當單擊一個按鈕時，即可完成正確的計算，但結果顯示在每個按鈕旁邊，而不僅僅是單擊的按鈕。使用ng-repeat提供多個按鈕

這裏是我到目前爲止(fiddle)：

在HTML

... 
<div ng-repeat="die in dice"> 
    <button type="button" class="btn btn-default" ng-click="rollDice(1, die, 0, scope)">{{"d" + die}}</button> 
    <span>{{result}}</span> 
</div> 
...

在controller.js

angular.module('diceAngularApp') 
.controller('DiceController', function ($scope) { 

$scope.dice = [2,3,4,6,8,10,12,20,100]; 
$scope.result = 0; 

$scope.rollDice = function(numRolls, numSides, bonus) { 
    var total = ""; 
    var rolls = new Array(numRolls); 

    for (var i = 0; i < numRolls; i++) { 
    var roll = randomInt(1, numSides); 
    rolls[i] = roll; 
    total += roll;  
    } 

    $scope.result = total; 
} 

    function randomInt(intMin, intMax) { 
     intMax = Math.round(intMax); 
     intMin = Math.round(intMin); 
     return intMin + Math.floor(intMax * (Math.random() % 1)); 
    } 

});

來源

2014-05-22 firexion

ng-repeat會爲每個迭代一個新的子範疇，但在你的rollDice方法$scope變量是父範圍。最簡單的方法是從rollDice返回結果，而不是直接設置範圍屬性和設置在該值NG單擊(fiddle)：

ng-click="result = rollDice(1, die, 0)"

另一種方式是通過將$event變量來訪問子範圍並使用angular.element（$ event.target）.scope（）：(fiddle)：

<div ng-repeat="die in dice"> 
    <button type="button" 
     class="btn btn-default" 
     ng-click="rollDice(1, die, 0, $event)"> <!-- pass $event --> 
      {{"d" + die}}<br/> 
    </button> 
    <span>{{result}}</span> 
</div>

的Javascript：

$scope.rollDice = function(numRolls, numSides, bonus, $event) { 
    var total = ""; 
    var rolls = new Array(numRolls); 

    for (var i = 0; i < numRolls; i++) { 
    var roll = randomInt(1, numSides); 
    rolls[i] = roll; 
    total += roll; 
    } 

    // get scope for element sending event and use it 
    angular.element($event.target).scope().result = total; 
}

另一種方法是在你的子作用域上有一個對象來保存結果並將該對象傳遞給你的點擊函數。你可以用ng-init(fiddle)

<div ng-repeat="die in dice"> 
    <button 
     ng-init="results = { result: 0 }" 
     type="button" 
     class="btn btn-default" 
     ng-click="rollDice(1, die, 0, results)"> 
      {{"d" + die}}<br/> 
    </button> 
    <span>{{results.result}}</span> 
</div>

的Javascript初始化對象：

$scope.rollDice = function(numRolls, numSides, bonus, results) { 
    var total = ""; 
    var rolls = new Array(numRolls); 

    for (var i = 0; i < numRolls; i++) { 
    var roll = randomInt(1, numSides); 
    rolls[i] = roll; 
    total += roll; 
    } 

    results.result = total; 
}

來源

2014-05-22 21:01:03

哦，哇，你超越了那一個。我非常喜歡你做到的第一種方式。我認爲那是我想要提出的，但不知道該怎麼做。其中一個被認爲比其他人更好的做法嗎？我想我隱約記得使用ng-init被認爲是不好的做法，因爲初始化代碼應該在控制器中處理（請糾正我，如果我錯了）另外，我有點困惑{{$ scope | json}}正在做第二個。它似乎沒有做任何事情，當我試圖刪除它，似乎工作得很好 – firexion

@firexion'{{$ scope | json}}'是一個['filter']（https://docs.angularjs.org/tutorial/step_09）。由於你對'ng-repeat'創建的範圍沒有「直接」控制，所以你需要使用'ng-init'來將範圍變量設置爲每個骰子的初始狀態。 – furier

我明白這是一個過濾器，它用於將$範圍過濾爲json格式。我對這裏的目的感到困惑。它似乎沒有打印任何東西，刪除它也沒有改變任何東西，所以我只是感到困惑，對不起。嗯，這對ng-init有很大的意義，這有助於解釋它的用法。謝謝。 :) – firexion

可以爲每個環繞button的divs的添加controller ，然後他們得到他們自己的scope。

page.html中

... 
<div ng-repeat="die in dices" ng-controller="DieCtrl"> 
    <button type="button" class="btn btn-default" ng-click="rollDice(1, die, 0, scope)">{{"d" + die}}</button> 
    <span>{{result}}</span> 
</div> 
...

controller.js

app.controller('DieCtrl', function ($scope) { 
    ... 
});

來源

2014-05-22 20:35:26 furier

啊，那完美的工作，我不得不計算代碼移動到DieCtrl和離開設置的東西在主DiceController和它完美的工作，非常感謝你。 – firexion

很高興幫助@firexion;） – furier

使用ng-repeat提供多個按鈕

回答

相關問題