How to get values of current table row's html controls on button click?

Question

Not getting the values of table row's HTML controls after binding the table by angularjs ng-repeat, by below code

$(".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>

I tried by jquery like above before binding its worked as expected but after bind the table its not working..

Don't mix jQuery and Angular - they are both DOM manipulation frameworks and will not work well together. You should be using `ng-click` on the button to call a method in your controller. — Lex, Jul 16 '19 at 19:18
yes, I did it too, but how to get clicked button's row's other html control values like I did in jquery? — Dawood Abbas, Jul 16 '19 at 19:20
Make sure they all have `ng-model` directives and then simply reference those properties in your controller. — Lex, Jul 16 '19 at 19:21
all row's Html controls will get same ng-model, if i get by ng-model of one row's select control value then how to get other row's select values by that same ng-model? — Dawood Abbas, Jul 16 '19 at 19:25
You should be binding to properties on your `IL` object instead of a generic controller-level property. I'm not trying to be obtuse here - this is all a very common pattern in AngularJS, but it is definitely a different mindset from jQuery. — Lex, Jul 16 '19 at 19:28

georgeawg · Answer 1 · 2019-07-16T20:13:01.173

Use the ng-click directive to specify a function in the controller to add the item:

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

For more information, see

AngularJS ng-click Directive API Reference

I need clicked button's current rows other Html control values like I getting mentioned jquery code.

Bind the model to the ng-repeat iterator:

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

New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the data hiding problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

For more information, see

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

Iam sorry, may be I couldn't explain what my requirement..I need not complete binded list or add, I need clicked button's current rows other Html control values like I getting mentioned jquery code. — Dawood Abbas, Jul 16 '19 at 19:50
Bind the model to the `ng-repeat` iterator. See update to answer. — georgeawg, Jul 16 '19 at 20:13

score 0 · Answer 2 · edited Jul 16 '19 at 19:53

I got it by like below

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

How to get values of current table row's html controls on button click?

2 Answers2