javascript - Angular.js 不会启动我的函数两次或类似的东西

Question

我写了一个函数，它获取歌曲的数量(数量)、歌曲的对象并创建一个新对象，其中包括随机选择的新歌曲数量。问题是，当我以 3 开始时，例如，它工作正常，但后来我以更少的数字开始这个功能，它显示我之前的结果是 3 首歌曲而不是 2 首。如果那么我以数字开始5 我想看 5 首新歌，但我得到的是以前的 3 首歌曲和 2 首新歌。为什么它不再随机选择？

$scope.getRandom = function(max) {
  return Math.floor(Math.random() * (max + 1));
};
$scope.chooseSongs = function(hide) {
  if (hide) {
    $scope.hideDiv();
  }
  if ($scope.number > songs.length) {
    $scope.number = songs.length;
  }
  while ($scope.newSongs.length < $scope.number) {
    $scope.rand = $scope.getRandom(songs.length - 1);
    $scope.songName = songs[$scope.rand].name;
    if ($scope.newSongs.indexOf($scope.songName) == -1) {
      $scope.newSongs.push($scope.songName);
    }
  }
  $scope.number = 1;
};

Answer 1

当你在一个数组上使用 .push 时，它会按照它说的去做:它将新数据“推”到数组的后面，忽略是否已经有数据这一事实。

因此您永远不会清除数组，并不断将新数据“推”到后面。

一个简单的解决方案是在开头添加 $scope.newSongs = [] $scope.newSongs.length = 0;你的功能:

$scope.getRandom = function(max) {
  return Math.floor(Math.random() * (max + 1));
};
$scope.chooseSongs = function(hide) {
  $scope.newSongs.length = 0; //$scope.newSongs = [];
  if (hide) {
    $scope.hideDiv();
  }
  if ($scope.number > songs.length) {
    $scope.number = songs.length;
  }
  while ($scope.newSongs.length < $scope.number) {
    $scope.rand = $scope.getRandom(songs.length - 1);
    $scope.songName = songs[$scope.rand].name;
    if ($scope.newSongs.indexOf($scope.songName) == -1) {
      $scope.newSongs.push($scope.songName);
    }
  }
  $scope.number = 1;
};

编辑:在 Deblaton Jean-Philippe 的有趣评论后更新。如果您只是重新分配 $scope.newSongs，AngularJs 将不会自动更新 View ，如果您改为清除长度，它会自动更新。