0
各セルの下にあるスニペットには、特定のシーケンスから取得されたシェイプの名前が含まれています。 ng-click = "fadeName（card）"で選択したセルのシェイプ名を更新しようとしていますが、クリックするとすべてのセルが同じシェイプ名で更新されます。たとえば、row1をクリックすると、デフォルトでは正方形で、他のすべての四角形が更新されます。選択した四角形のみを更新します。選択したセルの値のみを更新するにはどうすればよいですか？ng-clickでアレイ内の角度更新オブジェクト？
// 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() {
\t var rows = constants.getRows();
\t var cols = constants.getColumns();
\t var key = createColors();
\t var deck = {};
\t deck.rows = [];
\t // create each row
\t for(var i = 0; i < rows; i++) {
\t \t var row = {};
\t \t row.cards = [];
\t \t
\t \t // creat each card in the row
\t \t for (var j = 0; j < cols; j++) {
\t \t \t var card = {};
\t \t \t card.item = key.shift();
\t \t \t row.cards.push(card);
\t \t }
\t \t deck.rows.push(row);
\t }
\t return deck;
}
function createColors() {
\t var coloredCards = [];
\t
var rows = constants.getRows();
\t var cols = constants.getColumns();
var cells = rows * cols;
\t for (var n = 0; n < cells; n++) {
var thisCard = shapeSequence[n % shapeSequence.length];
coloredCards.splice(n, 0, thisCard);
\t }
\t return coloredCards;
}
var app = angular.module('cards', ['ngAnimate']);
app.controller("CardController", function($scope) {
\t $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 {
\t margin: 0px auto;
}
.cntr {
margin: 15px auto;
}<html ng-app="cards">
\t <head>
\t \t <meta charset="utf-8">
\t \t <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
\t
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" type="text/javascript"></script>
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js" type="text/javascript"></script>
\t </head>
<body>
\t <div class="cntr" ng-controller="CardController">
\t \t <table >
\t \t \t <tr ng-repeat="row in deck.rows">
\t \t \t \t <td ng-repeat="card in row.cards">
\t \t \t \t \t <div class="card_container " >
\t \t \t \t \t \t <div class="card " ng-click="fadeName(card)" ng-mouseenter="hover = true" ng-mouseleave="hover = false" >
<p ng-if="hover"> {{card.item.name}} </p>
\t \t \t \t \t \t </div>
\t \t \t \t \t </div>
\t \t \t \t </td>
\t \t \t </tr>
\t \t </table>
\t </div>
</html>