在下面的代码段中，每个单元格都包含从给定序列中获取的形状名称。我正在尝试在ng-click =“fadeName（card）”上更新所选单元格的形状名称，但是，单击它时会更新具有相同形状名称的所有单元格。例如，如果单击row1，col1默认为方形，所有其他方格都将更新，我只想更新所选的方格。如何仅更新选定的单元格值？
// constant variables
var constants = new (function() {
var rows = 10;
var columns = 10;
this.getRows = function() { return rows; };
this.getColumns = function() { return columns; };
})();
// Global Variables
var shapeSequence =
[
{id: '1', name:'square'},
{id: '2', name:'triangle'},
{id: '3', name:'circle'},
{id: '4', name:'oval'},
{id: '5', name:'pentagon'},
{id: '6', name:'hexagon'},
{id: '7', name:'decagon'},
]
// this function creates deck of cards that returns an object of cards
function createDeck() {
var rows = constants.getRows();
var cols = constants.getColumns();
var key = createColors();
var deck = {};
deck.rows = [];
// create each row
for(var i = 0; i < rows; i++) {
var row = {};
row.cards = [];
// creat each card in the row
for (var j = 0; j < cols; j++) {
var card = {};
card.item = key.shift();
row.cards.push(card);
}
deck.rows.push(row);
}
return deck;
}
function createColors() {
var coloredCards = [];
var rows = constants.getRows();
var cols = constants.getColumns();
var cells = rows * cols;
for (var n = 0; n < cells; n++) {
var thisCard = shapeSequence[n % shapeSequence.length];
coloredCards.splice(n, 0, thisCard);
}
return coloredCards;
}
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope) {
$scope.deck = createDeck();
$scope.fadeName = function(card) {
card.item.name = 'black';
}
}); .card_container {
position: relative;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
z-index: 1;
font-size: 1em;
border:solid 1px;
border-color:black;
}
.card_container {
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
}
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 >
<tr ng-repeat="row in deck.rows">
<td ng-repeat="card in row.cards">
<div class="card_container " >
<div class="card " ng-click="fadeName(card)" ng-mouseenter="hover = true" ng-mouseleave="hover = false" >
<p ng-if="hover"> {{card.item.name}} </p>
</div>
</div>
</td>
</tr>
</table>
</div>
</html>
答案 0 :(得分：1)
推进行
做
card = JSON.parse(JSON.stringify(card));
row.cards.push(card);
答案 1 :(得分：0)
您将shapeSequence中的引用添加到您的单元格中，您更新了一个单元格数据，这些数据将反映您使用相同引用的所有位置。所以我只在创建＆C 39创建颜色的时候创建了克隆：createColors（）＆＃39;。还添加了clone（）。
// constant variables
var constants = new (function() {
var rows = 10;
var columns = 10;
this.getRows = function() { return rows; };
this.getColumns = function() { return columns; };
})();
function clone(obj) {
if (null == obj || "object" != typeof obj) return obj;
var copy = obj.constructor();
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
}
return copy;
}
// Global Variables
var shapeSequence =
[
{id: '1', name:'square'},
{id: '2', name:'triangle'},
{id: '3', name:'circle'},
{id: '4', name:'oval'},
{id: '5', name:'pentagon'},
{id: '6', name:'hexagon'},
{id: '7', name:'decagon'},
]
// this function creates deck of cards that returns an object of cards
function createDeck() {
var rows = constants.getRows();
var cols = constants.getColumns();
var key = createColors();
var deck = {};
deck.rows = [];
// create each row
for(var i = 0; i < rows; i++) {
var row = {};
row.cards = [];
// creat each card in the row
for (var j = 0; j < cols; j++) {
var card = {};
card.item = key.shift();
row.cards.push(card);
}
deck.rows.push(row);
}
return deck;
}
function createColors() {
var coloredCards = [];
var rows = constants.getRows();
var cols = constants.getColumns();
var cells = rows * cols;
for (var n = 0; n < cells; n++) {
var thisCard = shapeSequence[n % shapeSequence.length];
coloredCards.splice(n, 0, clone(thisCard));
}
return coloredCards;
}
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope) {
$scope.deck = createDeck();
$scope.fadeName = function(card) {
card.item.name = 'black';
}
});.card_container {
position: relative;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
z-index: 1;
font-size: 1em;
border:solid 1px;
border-color:black;
}
.card_container {
-moz-perspective: 1000;
-webkit-perspective: 1000;
perspective: 1000;
}
.card {
width: 100%;
height: 100%;
cursor: pointer;
}
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 >
<tr ng-repeat="row in deck.rows">
<td ng-repeat="card in row.cards">
<div class="card_container " >
<div class="card " ng-click="fadeName(card)" ng-mouseenter="hover = true" ng-mouseleave="hover = false" >
<p ng-if="hover"> {{card.item.name}} </p>
</div>
</div>
</td>
</tr>
</table>
</div>
</html>