How to update an array item on ng-click Angular js?

Question

I have a grid that contains the names of shapes provided in a sequence.

[square, triangle, circle, oval, pentagon, hexagon, decagon]

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'} ];

I'm trying to update the text value of the selected cell from the grid to the text next in the sequence. I only want to show the text value when on mouseover the cell. As I have it now seems to work using an addEventListener(click) but I'd like to translate this to angular and use ng-click or ng-repeat, I'm new to Angular and I can't see how to use these in here

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>

MechanicalCoder · Accepted Answer · 2017-02-27 21:34:11Z

Please take a looks at the plunker https://plnkr.co/edit/BvrM0a2Rhi4zFSFvR038?p=preview. I have modified your code angular way to show the text on mouseover.

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>

Brenton Klassen · Accepted Answer · 2017-02-27 21:07:27Z

Start by putting card on the scope

$scope.card = card;

Now add your rows using ng-repeat

<table> <tr ng-repeat="row in card"> <td>{{row.name}}</td> <td>{{row.color}}</tr> </tr> <table>

This will get you going. Next look up lots more Angular tutorials. :)

Collectives™ on Stack Overflow

How to update an array item on ng-click Angular js?

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related