重复一个函数调用7次，然后使用angularjs用返回值填充标签

Repeat a function call 7 times and then fill labels with the returned values using angularjs

本文关键字：然后 angularjs 返回值 标签 填充 7次 函数调用 一个      更新时间：2023-09-26

我想运行一个函数7次，然后把它返回到按钮单击后的7个标签的值。这就是目前为止的内容

<button class="btn btn-danger btn-sm" ng-click="getRandom()">Roll</button>
<span class="label label-info">1:  </span>
<span class="label label-info">2:  </span>
$scope.getRandom = function(){  
var roll1 = Math.floor((Math.random()*(6 - 1))+1);
var roll2 = Math.floor((Math.random()*(6 - 1))+1);
var roll3 = Math.floor((Math.random()*(6 - 1))+1);
var roll4 = Math.floor((Math.random()*(6 - 1))+1);
var all = [roll1, roll2, roll3, roll4]
all.sort(function(a, b){return a-b});
var total = all[0] + all [1] + all[2];
return total;
};

我想过使用ngRepeat调用函数7次或只是在我的函数中放置一个循环来返回所有7个值，但我不太确定如何实现这个或我应该做什么。

你做对了。但是，与其一次又一次地使用相同的函数，不如尝试将diceRoll抽象为它自己的函数。这样你就可以在这里的第二个代码块中重用它，在这里你循环，滚动骰子7次并将其推入数组。

然后，使用.reduce()将所有的值一起添加到数组中(参见Mozilla文档)

var all = [];
var diceRoll = function() {
 return Math.floor((Math.random()*(6 - 1))+1);
}
for (i = 0; i < 7; i++) {
  var val = diceRoll();
  all.push(val);
}
/* EDIT: Below, I don't think you wanted this, sorry, it's late! */
all.reduce(function(previous, current, index, array){
  return previous + current;
});

最后的编辑:

好吧，既然你问了，我想这应该是Angular特有的——但我在这方面的知识不多，所以其他人可能会告诉我一种更有效或"Angular"的方式。

因此，相反，将生成的对象数组定义为附加到$作用域的，并将骰子滚动产生的值定义为附加到JSON对象的键"value"上——然后使用这里找到的很棒的JSON数组排序方法对结果数组进行排序，并使用ng-repeat来呈现您的数组!小提琴
var app = angular.module("myApp", []);
app.controller("myController", ["$scope", function($scope){
    $scope.all = [];
    var diceRoll = function() {
     return Math.floor((Math.random()*(6 - 1))+1);
    }
    for (i = 0; i < 7; i++) {
      var val = diceRoll();
      $scope.all.push({"value":val});
    }
    function sortResults(prop, asc) {
        $scope.all = $scope.all.sort(function(a, b) {
            if (asc) return (a[prop] > b[prop]);
            else return (b[prop] > a[prop]);
        });
    }
   sortResults('value', true);
}]);

标记:

<div ng-app="myApp">
    <table ng-controller="myController">
        <tr ng-repeat="a in all">
            <td>{{a.value}}</td>
        </tr>
    </table>
</div>
相关文章：