我正在使用一个使用ng-repeat显示它的大型json。但我需要拆分能力项目并将其显示在表格中。 iv使用过滤器将字符串拆分成一个数组，但是从结果数组中显示一个选定的元素超出了我的技能，或者我在想它。
期望的结果：对于第一个对象（iv不包括CSS）
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">10</td>
<td id="dex">14</td>
<td id="con">10</td>
<td id="int">11</td>
<td id="wis">12</td>
<td id="cha">11</td>
</tr>
</tbody>
</table>
</abilities-block>
iv链接了codepen和长片段道歉。
感谢您的帮助
var app = angular.module('app', []);
app.controller('controller', function($scope, $http) {
$scope.allmonsters = {
"monsters": [{
"name": "Aarakocra",
"size": "Medium",
"type": "humanoid (aarakocra)",
"alignment": "neutral good",
"AC": "12",
"HP": "13 (3d8)",
"speed": "20 ft., fly 50 ft.",
"abilities": "STR 10 DEX 14 CON 10 INT 11 WIS 12 CHA 11",
"skills": "Perception +5",
"senses": "passive Perception 15",
"languages": "Auran",
"challenge": "1/4",
"traits": [
"Dive Attack. If the aarakocra is flying and dives at least 30 ft. straight toward a target and then hits it with a melee weapon attack, the attack deals an extra 3 (1d6) damage to the target."
],
"actions": [
"Talon. Melee Weapon Attack: +4 to hit, reach 5 ft., one target. Hit: 4 (1d4 + 2) slashing damage.",
"Javelin. Melee or Ranged Weapon Attack: +4 to hit, reach 5 ft. or ra nge 30/120 ft., one target. Hit: 5 (1d6 + 2) piercing damage.",
"Summon Air Elemental. Five aarakocra within 30 feet of each other can magically summon an air elemental. Each of the five must use its action and movement on three consecu tive turns to perform an aerial dance and must maintain concentration while doing so (as if concentrating on a spell). When all five have finished their third turn of the dance, the elemental appears in an unoccupied space within 60 feet of them. It is fri en dly toward them and obeys their spoken commands. It remains for 1 hour, until it or all its summoners di e, or until any of its summoners dismisses it as a bonus action. A summoner can't perform the dance again until it finishes a short rest. When the elemental returns to the Elemental Plane of Air, any aarakocra within 5 feet of it can return with it."
]
}, {
"name": "Aboleth",
"size": "Large",
"type": "aberration",
"alignment": "lawful evil",
"AC": "17 (natural armor)",
"HP": "135 (18d10+36)",
"speed": "10 ft., swim 40 ft.",
"abilities": "STR 21 DEX 9 CON 15 INT 18 WIS 15 CHA 18",
"savingThrows": "Con +6, Int +8, Wis +6",
"skills": "History +12, Perception +10",
"senses": "darkvision 120 ft., passive Perception 20",
"languages": "Deep Speech, telepathy 120 ft.",
"challenge": "10",
"traits": [
"Amphibious. The aboleth can breathe air and water",
"Mucous Cloud. While underwater, the aboleth is surrounded by transformative mucus. A creature that touches the aboleth or that hits it with a melee attack while within 5 ft. of it must make a DC 14 Constitution saving throw. On a failure, the creature is diseased for 1d4 hours. The diseased creature can breathe only underwater.",
"Probing Telepathy. If a creature communicates telepathically with the aboleth, the aboleth learns the creature's greatest desires if the aboleth can see the creature."
],
"actions": [
"Multiattack. The aboleth makes three tentacle attacks.",
"Tentacle. Melee Weapon Attack: +9 to hit, reach 10 ft., one target. Hit: 12 (2d6 + 5) bludgeoning damage. If the target is a creature, it must succeed on a DC 14 Constitution saving throw or become diseased. The disease has no effect for 1 minute and can be removed by any magic that cures disease. After 1 minute, the diseased creature's skin becomes translucent and slimy, the creature can't regain hit points unless it is underwater, and the disease can be removed only by heal or another disease-curing spell of 6th level or higher. When the creature is outside a body of water, it takes 6 (1d12) acid damage every 10 minutes unless moisture is applied to the skin before 10 minutes have passed.",
"Tail. Melee Weapon Attack: +9 to hit, reach 10 ft. one target. Hit: 15 (3d6 + 5) bludgeoning damage.",
"Enslave (3/day). The aboleth targets one creature it can see within 30 ft. of it. The target must succeed on a DC 14 Wisdom saving throw or be magically charmed by the aboleth until the aboleth dies or until it is on a different plane of existence from the target. The charmed target is under the aboleth's control and can't take reactions, and the aboleth and the target can communicate telepathically with each other over any distance.\nWhenever the charmed target takes damage, the target can repeat the saving throw. On a success, the effect ends. No more than once every 24 hours, the target can also repeat the saving throw when it is at least 1 mile away from the aboleth."
],
"lairActions": [
"The aboleth casts phantasmal force (no components required) on any number of creatures it can see within 60 feet of it. While maintaining concentration on this effect, the aboleth can't take other lair actions. If a target succeeds on the saving throw or if the effect ends for it, the target is immune to the aboleth's phantasmal force lair action for the next 24 hours, although such a creature can choose to be affected.",
"Pools of water within 90 feet of the aboleth surge outward in a grasping tide. Any creature on the ground within 20 feet of such a pool must succeed on a DC 14 Strength saving throw or be pulled up to 20 feet into the water and knocked prone. The aboleth can't use this lair action again until it has used a different one.",
"Water in the aboleth's lair magically becomes a conduit for the creature's rage. The aboleth can target any number of creatures it can see in such water within 90 feet of it. A target must succeed on a DC 14 Wisdom saving throw or take 7 (2d6) psychic damage. The aboleth can't use this lair action again until it has used a different one."
],
"regionalEffects": [
"Underground surfaces within 1 mile of the aboleth's lair are slimy and wet and are difficult terrain.",
"Water sources within 1 mile of the lair are supernaturally fouled. Enemies of the aboleth that drink such water vomit it within minutes.",
"As an action, the aboleth can create an illusory image of itself within 1 mile of the lair. The copy can appear at any location the aboleth has seen before or in any location a creature charmed by the aboleth can currently see. Once created, the image lasts for as long as the aboleth maintains concentration, as if concentrating on a spell. Although the image is intangible, it looks, sounds, and can move like the aboleth. The aboleth can sense, speak, and use telepathy from the image's position as if present at that position. If the image takes any damage, it disappears."
],
"regionalEffectsFade": "If the aboleth dies, the first two effects fade over the course of 3d10 days.",
"legendaryPoints": "3",
"legendaryActions": [
"Detect. The aboleth makes a Wisdom (Perception) check.",
"Tail Swipe. The aboleth makes one tail attack.",
"Psychic Drain (Costs 2 Actions). One creature charmed by the aboleth takes 10 (3d6) psychic damage, and the aboleth regains hit points equal to the damage the creature takes."
]
}, {
"name": "Yuan-ti Pureblood",
"size": "Medium",
"type": "humanoid (yuan-ti)",
"alignment": "neutral evil",
"AC": "11",
"HP": "40 (9d8)",
"speed": "30 ft.",
"abilities": "STR 11 DEX 12 CON 11 INT 13 WIS 12 CHA 14",
"skills": "Deception +6, Perception +3, Stealth +3",
"damageImmunities": "poison",
"conditionImmunities": "poisoned",
"senses": "darkvision 60 ft., passive Perception 13",
"languages": "Abyssal, Common, Draconic",
"challenge": "1",
"traits": [
"Innate Spellcasting. The yuan-ti's spellcasting ability is Charisma (spell save DC 12). The yuan-ti can innately cast the following spells, requiring no material components:",
"� At will: animal friendship (snakes only)",
"� 3/day each: poison spray, suggestion",
"Magic Resistance. The yuan-ti has advantage on saving throws against spells and other magical effects."
],
"actions": [
"Multiattack. The yuan-ti makes two melee attacks.",
"Scimitar. Melee Weapon Attack: +3 to hit, reach 5 ft., one target. Hit: 4 (1d6 + 1) slashing damage.",
"Shortbow. Ranged Weapon Attack: +3 to hit, range 80/320 ft., one target. Hit: 4 (1d6 + 1) piercing damage plus 7 (2d6) poison damage."
]
}, {
"name": "Zombie",
"size": "Medium",
"type": "undead",
"alignment": "neutral evil",
"AC": "8",
"HP": "22 (3d8+9)",
"speed": "20 ft.",
"abilities": "STR 13 DEX 6 CON 16 INT 3 WIS 6 CHA 5",
"savingThrows": "Wis +0",
"conditionImmunities": "poisoned",
"senses": "darkvision 60 ft., passive Perception 8",
"languages": "understands all languages it spoke in life but can't speak",
"challenge": "1/4",
"traits": [
"Undead Fortitude. If damage reduces the zombie to 0 hit points, it must make a Constitution saving throw with a DC of 5+the damage taken, unless the damage is radiant or from a critical hit. On a success, the zombie drops to 1 hit point instead."
],
"actions": [
"Slam. Melee Weapon Attack: +3 to hit, reach 5 ft., one target. Hit: 4 (1d6 + 1) bludgeoning damage."
]
}]
}
});
angular.module('app')
.filter('splitabilitiesfilter', function() {
return function(input, scope) {
var res = input.split(" ")
//var splitabilities = res(scope); // evaluate it with the scope variable
//console.log(res)
return res;
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controller">
<MMsheets ng-repeat="x in allmonsters.monsters">
<abilities-block>
<table>
<tbody>
<tr>
<th>STR</th>
<th>DEX</th>
<th>CON</th>
<th>INT</th>
<th>WIS</th>
<th>CHA</th>
</tr>
<tr>
<td id="str">{{x.abilities|splitabilitiesfilter:scope}}</td>
<td id="dex">11 (+0)</td>
<td id="con">13 (+1)</td>
<td id="int">1 (–5)</td>
<td id="wis">3 (–4)</td>
<td id="cha">1 (–5)</td>
</tr>
</tbody>
</table>
</abilities-block>
</mmsheets>
<div>
答案 0 :(得分：1)
我不确定这是否是你想要的，但你可以试试这个：
在您的过滤器中，您可以添加索引：
angular.module('app').filter('splitabilitiesfilter', function() {
return function(input, index, scope) {
var res = input.split(" ")
return res[index];
};
});
在你的表中：
<tr>
<td id="str">{{x.abilities|splitabilitiesfilter:1:scope}}</td>
<td id="dex">{{x.abilities|splitabilitiesfilter:3:scope}}</td>
<td id="con">{{x.abilities|splitabilitiesfilter:5:scope}}</td>
<td id="int">{{x.abilities|splitabilitiesfilter:7:scope}}</td>
<td id="wis">{{x.abilities|splitabilitiesfilter:9:scope}}</td>
<td id="cha">{{x.abilities|splitabilitiesfilter:11:scope}}</td>
</tr>
我希望这可以帮到你。