Question

嗨我在angularjs中相对较新，我尝试创建骰子滚轮应用程序。

我有3个功能的控制器（$scope.rollDice，$scope.markDice，$scope.checkMarkedDice）。我想多次使用不同属性的$scope.rollDice - 独立使用。我想知道如何修改它们来处理一些OOP方法。不确定他们。在我的情况下，如果我在第一行按下 Roll 4d6 按钮，第二行也会受到影响，反之亦然。

我想我需要将rollerDice功能转移到工厂或指令。但我不确定如何管理它。

我可以设想将$scope.checkMarkedDice转换为$scope.rollDice的var函数，但我不知道如何处理$scope.markDice必须从index.html调用它所以它需要$scope或不是吗？

Plunker

Answer 1

通常，AngularJS不是OOP，因此您应该将单个对象存储在数组中，并使用 index 引用它们。

我已经按照你的要求做了。（警告：重型片段，此处为Plunker）

(function() {
  'use strict';
  var app = angular.module('myApp', []);
  app.controller('myCtrl', ["$scope", function($scope) {
    $scope.dice_ = [
      [1, 6, 4],
      [1, 6, 2]
    ];
    $scope.result = [
      [],
      []
    ]; // SPECIFY SIZE / LENGTH HERE (currently: 2 items)

    // Roll the dice
    $scope.rollDice = function(min, max, count, index) {
      var i = 0,
        result = [],
        markedDice = $scope.checkMarkedDice(index);

      if (markedDice.length === 0) {
        while (i < count) {
          result[i] = {
            number: Math.floor(Math.random() * (max - min + 1)) + min,
            class: "dice"
          };
          i += 1;
        }
      } else {
        while (i < count - markedDice.length) {
          result[i] = {
            number: Math.floor(Math.random() * (max - min + 1)) + min,
            class: "dice"
          };
          i += 1;
        }
        angular.forEach(markedDice, function(dice) {
          result.splice(dice.index, 0, dice);
        });
      }
      $scope.result[index] = result;
    };


    // Mark the dice
    $scope.markDice = function(dice) {
      if (dice.class === "dice") {
        dice.class = "dice marked";
      } else {
        dice.class = "dice";
      }
    };


    // Chceck if any dice is marked
    $scope.checkMarkedDice = function(index) {
      var marked = [];
      angular.forEach($scope.result[index], function(dice, $index) {
        if (dice.class.indexOf('marked') > -1) {
          dice.index = $index;
          marked.push(dice);
        }
      });
      return marked;
    };

    $scope.addDice = function(min, max, count) {
      $scope.result.push([]);
      $scope.dice_.push([min, max, count]);
    }

    $scope.removeDice = function() {
      $scope.result.pop();
      $scope.dice_.pop();
    }

  }]);
}());

.dice {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  float: left;
  width: 46px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  height: 46px;
  border: 1px solid #585858;
  border-radius: 15px;
  text-align: center;
  margin-right: 10px;
  background-color: #4573b9;
}

.dice:hover {
  background-color: #4573b9bd;
  cursor: pointer;
}

.marked {
  background: #00466f !important;
}

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="style.css">
  <title>Test freez reroller</title>
</head>

<body ng-controller="myCtrl">
  <div class="container">
    <h2>Basic Table</h2>
    <table class="table">
      <thead>
        <tr class="flex-row">
          <th class="col-md-3">Type</th>
          <th class="col-md-3">Action</th>
          <th class="col-md-6">Result</th>
        </tr>
      </thead>
      <tbody>
        <tr class="flex-row" ng-repeat="d_ in dice_ track by $index">
          <td>Lorem ipsum</td>
          <td>
            <button type="button" class="btn btn-primary" ng-click="rollDice(d_[0],d_[1],d_[2],$index);">Roll {{d_[2]}}d{{d_[1]}}</button>
          </td>
          <td>
            <div ng-click="markDice(dice);" class="{{dice.class}}" ng-repeat="dice in result[$index] track by $index">{{dice.number}}</div>
          </td>
        </tr>

      </tbody>
    </table>
    1: <input type="number" ng-model="a1"><br> 2: <input type="number" ng-model="a2"><br> 3: <input type="number" ng-model="a3"><br>
    <button type="button" class="btn btn-success" ng-click="addDice(a1,a2,a3)">Add</button>
    <button type="button" class="btn btn-danger" ng-click="removeDice()">Remove</button>
  </div>
</body>

</html>

使用不同的属性多次调用函数

1 个答案: