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

1

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. :)

answered Feb 27, 2017 at 21:07

Brenton Klassen

1385 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related