javascript - 使用 AngularJS 在表中包含和删除产品

Question

我如何使用 AngularJS 在表中包含和删除产品列表？ 我在选择列表中选择一个产品，并设置金额，然后单击“添加”以添加到表格中。

http://jsfiddle.net/hqWW7/

HTML:

<label>Select a product</label>
<select>
    <option>select...</option>
    <option>value 1</option>
    <option>value 2</option>
    <option>value 3</option>
    <option>value 4</option>
    <option>value 5</option>
</select>
<br>
<label>Amount</label>
<input type="text" name="amount">
    <button type="button">ADD</button>
    <br>
        <table>
            <thead>
            <tr>
                <td>Product</td>
                <td>Amount</td>
                <td>Remove</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td><a href="">x</a></td>
            </tr>
            </tbody>
        </table>

CSS:

table {
    width: 50%;
}

table thead {
    background-color: green;
    color: #fff;
    font-family: arial;
}

table tbody {
    background-color: #ddd;
}

Answer 1

首先您需要创建一个 Controller 。

https://docs.angularjs.org/api/ng/directive/ngController

您需要在 Controller 中创建一个方法来推送您的项目并总计为数组。通过以下方式将该功能分配给您的按钮点击:

https://docs.angularjs.org/api/ng/directive/ngClick

在 html 中，您需要循环数组才能将记录添加到表中。

https://docs.angularjs.org/api/ng/directive/ngRepeat

针对您的要求，需要做很多事情。请检查文档，如果您不理解或遇到错误，您可以再次询问。