Question

我有一个我正在研究的angularJS应用程序需要逐个循环重复。但不是有序的。循环中的下一个项目需要随机选择。我让它们一个接一个地循环，但它们似乎没有随机化。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, filterFilter, $timeout) {

  Array.prototype.sum = function(prop) {
    var ptotal = 0
    for (var i = 0, _len = this.length; i < _len; i++) {
      ptotal += this[i][prop]
    }
    return ptotal
  }

  $scope.owners = [{
    "id": "1",
    "name": "parent 1"
  }, {
    "id": "2",
    "name": "parent 2"
  },
  {
    "id": "3",
    "name": "parent 3"
  }];

  $scope.children = [{
    "id": "1",
    "total": "2",
    "owner": "1",
    "name": "child 1"
  }, {
    "id": "2",
    "total": "2",
    "owner": "2",
    "name": "child 2"
  }, {
    "id": "3",
    "total": "1",
    "owner": "2",
    "name": "child 3"
  }, {
    "id": "4",
    "total": "5",
    "owner": "3",
    "name": "child 4"
  }, {
    "id": "5",
    "total": "2",
    "owner": "1",
    "name": "child 5"
  }];
  
  var random = Math.floor(Math.random() * $scope.owners.length);
  $scope.selectedOwner = $scope.owners[random];
  $scope.childrenList = $scope.children.filter(function(x) {
    return x.owner == $scope.selectedOwner.id;
  });
  $scope.child_index = 0;

  $scope.ownerChange = function(owner) {
    $scope.selectedOwner = owner;
    $scope.childrenList = $scope.children.filter(function(x) {
      return x.owner == $scope.selectedOwner.id;
    });
  }

  $scope.data = [];
  
  $scope.remove = function(child){
    for(var i3 = $scope.data.length - 1; i3 >= 0; i3--){
      if($scope.data[i3].number == child.number && $scope.data[i3].id == child.id){
          $scope.data.splice(i3,1);
      }
    }
  }
  
  $scope.add = function(child) {
    $scope.totalInit = filterFilter($scope.children, {
      owner: child.owner
    });
    var total = $scope.totalInit.sum("total");
    var complete = filterFilter($scope.data, {
      id: +child.id
    }).length;
    var number = +complete + 1;
    var input = {
      "id": child.id,
      "name": child.name,
      "number": number
    };
    if (+number == +child.total) {
      $scope.data.push(input);
      for(var i = $scope.children.length - 1; i >= 0; i--){
        if($scope.children[i].id == child.id){
          $scope.children.splice(i,1);
        }
      }
      $scope.childrenList = $scope.children.filter(function(x) {
        return x.owner == $scope.selectedOwner.id;
      });
      $scope.ownerStatus = filterFilter($scope.children, {owner: child.owner}).length;
      if ($scope.ownerStatus === 0) {
        for(var i2 = $scope.owners.length - 1; i2 >= 0; i2--){
          if($scope.owners[i2].id == child.owner){
              $scope.owners.splice(i2,1);
          }
        }
        var random2 = Math.floor(Math.random() * $scope.owners.length);
        $scope.selectedOwner = $scope.owners[random2];
        $scope.childrenList = $scope.children.filter(function(x) {
          return x.owner == $scope.selectedOwner.id;
        });
        if ($scope.owners.length === 0){
          alert("All Trials Complete");
          $scope.children = [];
          $scope.owners = [];
        }
      }
      if ($scope.child_index >= $scope.children.length - 1) {
            $scope.child_index_index = 0;
        } else {
            //$scope.child_index_index++;
            var randomIndex = Math.floor(Math.random() * $scope.children.length);
            $scope.child_index_index = randomIndex;
      }  
    } else {
      $scope.data.push(input);
      if ($scope.child_index >= $scope.children.length - 1) {
            $scope.child_index_index = 0;
        } else {
            randomIndex = Math.floor(Math.random() * $scope.children.length);
            $scope.child_index_index = randomIndex;
      }
    }
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Test</title>
</head>

<body ng-controller="MainCtrl">
  <b>Select Owner:</b>
  <select ng-options="o.name for o in owners track by o.id" ng-model="selectedOwner" ng-change="ownerChange(selectedOwner)">
  </select>
  <ul>
    <li ng-repeat="c in childrenList track by c.id" ng-if="child_index == $index">{{c.name}}
      <button ng-click="add(c)">Add</button>
    </li>
  </ul>
  <b>Data:</b>
  <ul>
    <li ng-repeat="d in data track by $index">{{d.name}}
      <button ng-click="remove(d, $index)">Remove</button>
    </li>
  </ul>
</body>

</html>

如何在Angular中逐个循环遍历ng-repeat？

0 个答案: