在下面的代码片段中，每个单元格都包含取自给定序列的形状的名称。我正在尝试更新 ng-click="fadeName(card)"上选定单元格的形状名称，但是，单击它时会更新具有相同形状名称的所有单元格。例如，如果您单击 row1,col1默认是方 block ，所有其他方 block 都会更新，我只想更新所选的方 block 。如何仅更新选定的单元格值？
// 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>最佳答案
插入行时
做
card = JSON.parse(JSON.stringify(card));
row.cards.push(card);
关于javascript - ng-click 时 Angular 更新数组中的对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42499578/