Angularjs 数组推送不工作

Question

我正在尝试将一个随机排列的字符串数组推送到我的范围变量，但它如何抛出重复数组值的错误。这以前从未发生过。

下面是我的代码片段。您可以检查控制台是否有错误：

var app = angular.module('ABCD', []);
app.controller('ABCDController', ['$scope',
  function($scope) {
    $scope.start_word = ['C', 'A', 'T'];
    $scope.word = [
      ['C', 'A', 'T']
    ];
    $scope.shuffle = function() {
      var shuffle_word = Shuffle($scope.word[0]);
      console.log("SHUFFLED VARIABLE: " + shuffle_word);
      console.log("SCOPE VARIABLE: " + $scope.word);
      $scope.word.push(shuffle_word);
    };
  }
]);

function Shuffle(o) {
  for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="ABCD">
  <div ng-controller="ABCDController">
    <button class="btn btn-primary" ng-click="shuffle()">Shuffle</button>
    <p>START WORD: {{start_word}}</p>
    <p ng-repeat="(key,value) in word">SHUFFLED WORD: {{value}}</p>
  </div>
</div>

我的错误是，当我尝试将新的随机值放入数组时，它会将所有值更改为新值。例如：

初始数组：

console.log($scope.word); OUTPUT: [['C','A','T']]

推送后：

console.log($scope.word) OUTPUT: [['T','C','T'],['T','C','T']]

Answer 1

也许尝试在单词数组中有一个单词对象，例如：

$scope.word[{num:0,word:'CAT'},{num:1,word:'ACT'}];

Answer 2

您正在打乱原始单词并创建两个相同的值。使用单词的临时副本，如下所示。编辑：This answer 展示了复制数组的技巧。

var app = angular.module('ABCD', []);
app.controller('ABCDController', ['$scope',
  function($scope) {
    $scope.start_word = ['C', 'A', 'T'];
    $scope.word = [
      ['C', 'A', 'T']
    ];
    $scope.shuffle = function() {
      var tmpWord = $scope.word[0].slice(); // create a copy
      var shuffle_word = Shuffle(tmpWord);
      console.log("SHUFFLED VARIABLE: " + shuffle_word);
      console.log("SCOPE VARIABLE: " + $scope.word);
      $scope.word.push(shuffle_word);
      console.log($scope.word);
    };
  }
]);

function Shuffle(o) {
  for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<div ng-app="ABCD">
  <div ng-controller="ABCDController">
    <button class="btn btn-primary" ng-click="shuffle()">Shuffle</button>
    <p>START WORD: {{start_word}}</p>
    <p ng-repeat="(key,value) in word">SHUFFLED WORD: {{value}}</p>
  </div>
</div>

Answer 3

您永远不会重置 word 数组，因此每次对 Shuffle() 的新调用都会添加到数组中，而不仅仅是替换数组的内容。

$scope.shuffle = function() {
  var shuffle_word = Shuffle($scope.word[0]);
  console.log("SHUFFLED VARIABLE: " + shuffle_word);
  console.log("SCOPE VARIABLE: " + $scope.word);
  $scope.word = []; //clear the previous array elements
  $scope.word.push(shuffle_word);
};

或者一个完整的片段（注意我把这个词改成了 "catalog"）。

var app = angular.module('ABCD', []);
app.controller('ABCDController', ['$scope',
  function($scope) {
    $scope.start_word = ['C', 'A', 'T', 'A', 'L', 'O', 'G'];
    $scope.word = [
      ['C', 'A', 'T', 'A', 'L', 'O', 'G']
    ];
    $scope.shuffle = function() {
      var shuffle_word = Shuffle($scope.word[0]);
      console.log("SHUFFLED VARIABLE: " + shuffle_word);
      console.log("SCOPE VARIABLE: " + $scope.word);
      $scope.word = []; //clear the previous array elements
      $scope.word.push(shuffle_word);
    };
  }
]);

function Shuffle(o) {
  for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
}

<!DOCTYPE html>
<html ng-app="ABCD">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"></script>
    <script src="app.js"></script>
  </head>

<div ng-app="ABCD">
  <div ng-controller="ABCDController">
    <button class="btn btn-primary" ng-click="shuffle()">Shuffle</button>
    <p>START WORD: {{start_word}}</p>
    <p ng-repeat="(key,value) in word ">SHUFFLED WORD: {{value}}</p>
  </div>
</div>

</html>

Angularjs 数组推送不工作

Angularjs array push not working

arrays

push

angularjs