如何在AngularJS中创建点分配系统?

时间:2014-02-19 22:22:55

标签: javascript angularjs

我正在尝试在AngularJS中创建一个点分配系统。我设法创建了一个添加DOM元素的基本指令。这些元素包括显示“0”点的跨度和递增和递减的按钮。可用于在4个不同类别中分配的总点数。

指令

angular.module('components', []).
  directive('addSkills', function() {
    return {
      restrict: "A",
      scope: {
        max: '=',
        min: '=',
        pointValue: '='
      },
      template: '<div>' +
                  '<span>{{scoreValue}}</span>' +
                  '<button ng-click="addPoints()" ng-disabled="pointValue >= max">+</button>' +
                  '<button ng-click="minusPoints()" ng-disabled="pointValue <= min">-</button>' +
                  '</div>',
      link: function(scope, element, attrs) {
        scope.addPoints = function() {
          scope.scoreValue += 1;
          scope.$parent.pointsAvailable -= 1;
        };
        scope.minusPoints = function() {
          scope.scoreValue -= 1;
          scope.$parent.pointsAvailable += 1;
        };
      }
    }
  });

控制器

angular.module('myControllers', []).
controller('skills', function($rootScope, $scope, $http, $location, $q) {
  $scope.pointsAvailable = 10; // Hardcoded here, but actually formulated
  $scope.skills = {};
  $scope.skills.strength = {
    points: 0,
    description: '...',
    // more properties
  };
  $scope.skills.speed = {
    points: 0,
    description: '...',
    // more properties
  };
  $scope.skills.intelligence = {
    points: 0,
    description: '...',
    // more properties
  };
});

HTML

// more html code above
<div class="skills">
  <h4>{{pointsAvailable}}</h4>
  <div class="skillRating">
    <label>Strength: </label>
    <div data-add-skills data-point-value="skills.strength.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
  <div class="skillRating">
    <label>Speed: </label>
    <div data-add-skills data-point-value="skills.speed.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
  <div class="skillRating">
    <label>Intelligence: </label>
    <div data-add-skills data-point-value="skill.intelligence.points" data-max="pointsAvailable" data-min="0"></div>
  </div>
</div>

所以我想要完成的是,当你为每个技能添加点数时,$ scope.pointsAvailable会减少。因此,如果你增加3个力量点,你只剩下7个分配给其他技能。

我尝试在点击增量按钮时修改“pointsAvailable”,但这不起作用,因为当将点数分配给一个技能时,它会在5个点上最大化,禁用增量按钮。随着每个增量,它减少了“pointsAvailable”,所以我不能,比如说,将所有10个点分配给一个技能。

1 个答案:

答案 0 :(得分:1)

我创建了一个超级简单版本,向您展示了如何不需要使用指令:http://jsfiddle.net/ADukg/4768/

这基本上使用ng-repeat来揭示技能之间的共性。

查看:

<div ng-controller="MyCtrl">
  Points available: {{pointsAvailable}}
   <div ng-repeat="skill in skills">
    <div class="skillRating">
        <label>{{skill.name}}</label>
        <div>
            <span>{{skill.score}}</span>
            <button ng-click="addPoints(skill)" ng-disabled="skill.score >= skill.max || pointsAvailable <= 0">+</button>
            <button ng-click="minusPoints(skill)" ng-disabled="skill.score <= skill.min">-</button>
        </div>
      </div>
   </div>
</div>

控制器:

function MyCtrl($scope) {
    $scope.pointsAvailable = 10;

    $scope.skills = [
        { name: 'strength', score: 0, max: 8, min: 0 },
        { name: 'speed', score: 0, max: 10, min: 0 },
        { name: 'intelligence', score: 0, max: 5, min: 0 }
    ];

    $scope.addPoints = function(skill) {
        skill.score += 1;
        $scope.pointsAvailable -= 1;
    };

    $scope.minusPoints = function(skill) {
        skill.score -= 1;
        $scope.pointsAvailable += 1;
    };
}