AngularJS中如何为每个Submit按钮存储forEach遍历的对应对象

核心思路就是把当前优惠券对象和按钮的点击事件绑定在一起，这样点击按钮时就能精准获取到对应的优惠券数据，调用你的购买函数处理。下面分两种常见场景给出具体实现：

一、原生JavaScript实现 #

假设你已经有了优惠券数组coupons，比如：

const coupons = [
  { id: 1, name: "满100减20", discount: 20 },
  { id: 2, name: "全场8折", discount: 0.8 },
  { id: 3, name: "满200减50", discount: 50 }
];

你可以通过循环创建DOM元素，给每个按钮的点击事件绑定对应的优惠券对象：

// 获取存放优惠券的容器
const couponContainer = document.getElementById('coupon-container');

coupons.forEach(coupon => {
  // 创建优惠券卡片
  const couponCard = document.createElement('div');
  couponCard.className = 'coupon-card';
  couponCard.innerHTML = `
    <h3>${coupon.name}</h3>
    <p>优惠：${typeof coupon.discount === 'number' && coupon.discount < 1 ? `打${coupon.discount*10}折` : `减${coupon.discount}元`}</p>
  `;

  // 创建购买按钮
  const buyBtn = document.createElement('button');
  buyBtn.textContent = '立即购买';
  
  // 关键步骤：绑定当前优惠券到点击事件
  buyBtn.addEventListener('click', () => {
    // 调用你的购买函数，并传入当前优惠券对象
    c.submitPurchaseForm(coupon);
    // 如果需要触发表单展示，也可以在这里调用c.showAllCouponsForm()
  });

  // 把按钮添加到卡片，再把卡片加入容器
  couponCard.appendChild(buyBtn);
  couponContainer.appendChild(couponCard);
});

二、React框架实现（如果用React开发） #

在React里，你可以直接在循环渲染时，把当前优惠券作为参数传递给点击事件处理函数：

import React from 'react';

function CouponList() {
  const coupons = [
    { id: 1, name: "满100减20", discount: 20 },
    { id: 2, name: "全场8折", discount: 0.8 },
    { id: 3, name: "满200减50", discount: 50 }
  ];

  const handleBuy = (coupon) => {
    // 调用购买函数并传入对应优惠券
    c.submitPurchaseForm(coupon);
    // 按需调用表单展示函数
    // c.showAllCouponsForm();
  };

  return (
    <div id="coupon-container">
      {coupons.map(coupon => (
        <div key={coupon.id} className="coupon-card">
          <h3>{coupon.name}</h3>
          <p>优惠：{typeof coupon.discount === 'number' && coupon.discount < 1 ? `打${coupon.discount*10}折` : `减${coupon.discount}元`}</p>
          <button onClick={() => handleBuy(coupon)}>立即购买</button>
        </div>
      ))}
    </div>
  );
}

export default CouponList;

为什么之前可能失效？ #

大概率是你没有给函数传递对应优惠券参数，比如直接写c.submitPurchaseForm()而不是c.submitPurchaseForm(coupon)，这样函数根本不知道要处理哪张优惠券。上面的写法利用闭包（原生JS）或箭头函数绑定参数（React），确保每个按钮都能精准关联到自己对应的优惠券对象。

内容的提问来源于stack exchange，提问作者Guy BD