我有一个网格，其中包含序列中提供的形状名称。
[正方形、三 Angular 形、圆形、椭圆形、五边形、六边形、十边形]
var card =
[
{name:'square',color:'pink'},
{name:'triangle',color:'lightgrey'},
{name:'circle',color:'lightblue'},
{name:'oval',color:'yellow'},
{name:'pentagon',color:'lightgreen'},
{name:'hexagon',color:'black'},
{name:'decagon',color:'cyan'}
];
我正在尝试将所选单元格的文本值从网格更新为序列中的下一个文本。我只想在鼠标悬停在单元格上时显示文本值。正如我现在所拥有的，它似乎可以使用 addEventListener(click) 工作，但我想将其转换为 Angular 并使用 ng-click 或 ng-repeat，我是 Angular 的新手，我不知道如何使用这些在这里
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope) {
var card =
[
{name:'square',color:'pink'},
{name:'triangle',color:'lightgrey'},
{name:'circle',color:'lightblue'},
{name:'oval',color:'yellow'},
{name:'pentagon',color:'lightgreen'},
{name:'hexagon',color:'black'},
{name:'decagon',color:'cyan'}
];
document.getElementById('grid').addEventListener("click", function(e) {
if (e.target.nodeName.toLowerCase() === "td") {
var currentIndex = card.findIndex(function(shape) {
return shape.name === e.target.innerHTML;
});
e.target.innerHTML = card[(currentIndex + 1) % card.length].name;
e.target.style.backgroundColor = card[(currentIndex + 1) % card.length].color;
}
});
function generateTable(grid, rows, cols) {
var row;
var cells = rows * cols;
for(var i=0; i < cells; i++){
// track row length and insert new ones when necessary
// also creates the first row
if(i % cols == 0) {
row = grid.insertRow(-1);
}
// track our position in the card list
// modulo operator lets us loop through the cards repeatedly
var thisCard = card[i % card.length];
cell = row.insertCell(-1);
cell.style.backgroundColor = thisCard.color;
}
}
generateTable(document.getElementById('grid'), 10, 10);
}); .card_container {
position: relative;
width:500px;
height:500px;
text-align: center;
vertical-align: middle;
table-layout:fixed;
z-index: 1;
font-size: 1em;
}
.card_container td {
width:50px;
height:50px;
line-height: 50px;
}
table {
margin: 0px auto;
}
.cntr {
margin: 15px auto;
}<html ng-app="cards">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" type="text/javascript"></script>
</head>
<body>
<div class="cntr" ng-controller="CardController">
<table id="grid" class="card_container" ng-mouseenter="hover = true" ng-mouseleave="hover = false" >
<p ng-if="hover"> </p>
</table>
</div>
</html>最佳答案
请看看这个骗子https://plnkr.co/edit/BvrM0a2Rhi4zFSFvR038?p=preview 。我已经修改了您的代码 Angular 方式以在鼠标悬停时显示文本。
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope) {
var card =
[
{name:'square',color:'pink'},
{name:'triangle',color:'lightgrey'},
{name:'circle',color:'lightblue'},
{name:'oval',color:'yellow'},
{name:'pentagon',color:'lightgreen'},
{name:'hexagon',color:'black'},
{name:'decagon',color:'cyan'}
];
$scope.onMouseHover = function(e) {
if (e.target.nodeName.toLowerCase() === "td") {
var currentIndex = card.findIndex(function(shape) {
return shape.name === e.target.innerHTML;
});
e.target.innerHTML = card[(currentIndex + 1) % card.length].name;
e.target.style.backgroundColor = card[(currentIndex + 1) % card.length].color;
}
};
function generateTable(grid, rows, cols) {
var row;
var cells = rows * cols;
for(var i=0; i < cells; i++){
// track row length and insert new ones when necessary
// also creates the first row
if(i % cols === 0) {
row = grid.insertRow(-1);
}
// track our position in the card list
// modulo operator lets us loop through the cards repeatedly
var thisCard = card[i % card.length];
cell = row.insertCell(-1);
cell.style.backgroundColor = thisCard.color;
}
}
generateTable(document.getElementById('grid'), 10, 10);
}); /* Put your css in here */
.card_container {
position: relative;
width:500px;
height:500px;
text-align: center;
vertical-align: middle;
table-layout:fixed;
z-index: 1;
font-size: 1em;
}
.card_container td {
width:50px;
height:50px;
line-height: 50px;
}
table {
margin: 0px auto;
}
.cntr {
margin: 15px auto;
}<!DOCTYPE html>
<html ng-app="cards">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" type="text/javascript"></script>
<script src="app.js"></script>
</head>
<body ng-controller="CardController">
<div class="cntr" ng-controller="CardController">
<table id="grid" class="card_container" ng-mouseenter="hover = true" ng-mouseleave="hover = false" ng-mouseover="onMouseHover($event)">
</table>
</div>
</body>
</html>关于javascript - 如何更新 ng-click Angular js 上的数组项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42495615/