我正在尝试在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个点分配给一个技能。
答案 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;
};
}