个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 18:06:23 25 4
gpt4 key购买 nike

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

[正方形、三 Angular 形、圆形、椭圆形、五边形、六边形、十边形]

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(click) 工作，但我想将其转换为 Angular 并使用 ng-click 或 ng-repeat，我是 Angular 的新手，我不知道如何使用这些在这里

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>

最佳答案

请看看这个骗子https://plnkr.co/edit/BvrM0a2Rhi4zFSFvR038?p=preview 。我已经修改了您的代码 Angular 方式以在鼠标悬停时显示文本。

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>

关于javascript - 如何更新 ng-click Angular js 上的数组项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42495615/

25 4 0
文章推荐： javascript - 了解 Redux 的基本实现 | prevState 是如何使用的？
文章推荐： iphone - UITableViewCell 编辑缩进
文章推荐： css - 旋转后得到错误的设计
文章推荐： javascript - 为什么我的 Angularjs 服务不允许我调用它？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com