Question

我有一个网格，其中包含序列中提供的形状名称。

[正方形，三角形，圆形，椭圆形，五边形，六边形，十边形]

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

我尝试将所选单元格的文本值从网格更新到序列中的下一个文本。我只想在鼠标悬停在单元格上时显示文本值。因为我现在似乎使用addEventListener（点击），但我想将其转换为角度并使用ng-click或ng-repeat，我是Angular的新手，我可以＆＃39;看看如何在这里使用这些

＆＃13;

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);
 
 
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

请仔细查看一下https://plnkr.co/edit/BvrM0a2Rhi4zFSFvR038?p=preview。我修改了您的代码角度方式以在鼠标悬停时显示文本。

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>

Answer 2

首先将card放在范围

上

$scope.card = card;

现在使用ng-repeat

添加行

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

这会让你前进。接下来查看更多Angular教程。：）

如何在ng-click Angular js上更新数组项？

2 个答案: