Question

通过angularjs ng-repeat通过以下代码绑定表后，未获取表行的HTML控件的值

$(".btnAddToCartClass").click(function () {
    var item = $(this).closest("tr").find(".ddlCategoryClass").val();
    var itemQty = $(this).closest("tr").find(".txtQuantityClass").val();
    var itemCondition = $(this).closest("tr").find(".chkUrgentClass").is(':checked');

    alert(item + ' ' + itemQty + ' ' + itemCondition);
});

<table id="TblAdminDash">

    <tbody ng-repeat="IL in ItemsListForOrder">
        <tr>
            <td ng-bind="IL.ItemName"></td>
            <td>
                <select class="ddlCategoryClass" id="ddlCategory"
                        ng-model="ddlCategory">
                    <option value="" disabled>Select Category</option>
                    <option value="DryClean">Dry Clean</option>
                </select>
            </td>
            <td>
                Qty &nbsp;&nbsp;&nbsp;
                <input id="txtQuantity" class="txtQuantityClass" 
                       type="number" max="10000" min="1" value="1" />
            </td>
            <td>
                <input type="checkbox" id="chkUrgent" ng-model="chkUrgent"
                       class="chkUrgentClass"/> &nbsp;Urgent
            </td>
            <td>
                <input type="button" class="btnAddToCartClass" value="Add"/>
            </td>
        </tr>

    </tbody>
</table>

我在绑定jQuery之前按预期尝试了上述方法，但是在绑定表后却无法正常工作。

Answer 1

使用ng-click指令在控制器中指定一个用于添加项目的函数：

<tbody ng-repeat="IL in ItemsListForOrder">
   <tr>
        <!-- ... -->
        <td>
            <input type="button" class="btnAddToCartClass" value="Add"
                   ng-click="addItem(IL) />
        </td>
    </tr>
</tbody>

JS

$scope.addItem = function(item) {
    console.log(item);
    //...
};

有关更多信息，请参见

AngularJS ng-click Directive API Reference

我需要单击按钮的当前行以及其他Html控件值，例如我提到的jQuery代码。

将模型绑定到ng-repeat迭代器：

<tbody ng-repeat="IL in ItemsListForOrder">
   <tr>
        <td>
            <input type="checkbox" id="chkUrgent" ng-model="IL.chkUrgent"
                   class="chkUrgentClass"/> &nbsp;Urgent
        </td>
        <!-- ... -->
    </tr>
</tbody>

$scope.addItem = function(item) {
    console.log(item);
    console.log(item.chkUrgent);
    //...
};

新的AngularJS开发人员常常没有意识到ng-repeat，ng-switch，ng-view，ng-include和ng-if都创建了新的子范围，因此数据隐藏当涉及这些指令时，通常会出现问题。（有关问题的快速说明，请参见this example。）

遵循always have a '.' in your ng-models的“最佳实践”可以很容易避免原语的问题-观看3分钟即可。 Misko演示了ng-switch的原始绑定问题。

有关更多信息，请参见

What are the nuances of scope prototypal / prototypical inheritance in AngularJS?

Answer 2

我是通过下面的方式得到的

<input type="button" class="btnAddToCartClass"
       data-ng-click="AddToCart($event)" value="Add" />

$scope.AddToCart = function (event) {

    var item = $(event.target).closest("tr").find(".ddlCategoryClass").val();  
    var itemQty = $(event.target).closest("tr").find(".txtQuantityClass").val();
    var itemCondition = $(event.target).closest("tr").find(".chkUrgentClass").is(':checked'); 

    alert(item + ' ' + itemQty + ' ' + itemCondition);
};

如何在单击按钮时获取当前表行的html控件的值？

2 个答案: