从选中的父行中获取元素

Question

I have the following row in a table.

<tr class="data_rows" ng-repeat='d in t2'> <td class="tds"> <input class='checkBoxInput' type='checkbox' onchange='keepCount(this)'></td> <td class="tds"><a href='perf?id={{d.ID}}'>{{d.ID}}</a></td> <td class="tds">{{d.HostOS}}</td> <td class="tds">{{d.BuildID}}</td> <td class="tds">{{d.Description}}</td> <td class="tds">{{d.User}}</td> <td class="tds">{{d.StartTime}}</td> <td class="tds">{{d.UniqueMeasure}}</td> <td class="tds">{{d.TotalMeasure}}</td> </tr>

Here's the HTML for button that will invoke the function to collect the ids from checked check boxes and store them.

<div id='compButtonDiv' align='center' style="display: none;"> <input id='cButton' type='button' value='compare selections' onclick='submitSelection()' style= "margin :0 auto" disabled> </div>

The data is in t2 which consists of an array of length 15-20. What i want to do is get the value of ID ie, {{d.ID}} of the 2 checked check boxes so that i can store them in a variable and pass them as query parameters to URL using `location.href = url?param1&param2'

Here's the javascript:

function keepCount(obj){     
debugger;
//var count=0;
if(obj.checked){
    obj.classList.add("checked");
}else{
    obj.classList.remove("checked");
}

var count = document.getElementsByClassName("checked").length;
var cBtn = document.getElementById('cButton');
//alert(count);

if(count == 2){
    cBtn.disabled = false;
}
else if(count < 2){
    cBtn.disabled= true;
}
else{
    cBtn.disabled= true;
    alert("Please Select two sets for comparison. You have selected: " +     count);
}
}

function submitSelection(){
// what should be the code here??

location.href= "existingURL?a&b";
}

Now can someone please tell me how to get the id's?? I need to extract ID from the checkboxes that are checked(on the click of button whose code i've mentioned above'.

Thanks.

-Ely

Answer 1

Firstly when we use angularjs we tend to depend less and less on DOM manipulation.

For this reason, what you can do is to attach ngModel to the checkbox. Like:

<input class='checkBoxInput' ng-model='d.isChecked' type='checkbox' onchange='keepCount(this)'>

What this does is, it attaches the variable (in your case the property of item in the list) to the check box. If it is checked it is true, if unchecked, initially it will be undefined, later on checking and then unchecking it will be false.

Now, when you submit, just loop over the original list in the function and check the values of d.isChecked (true/falsy values). Then you can add the necessary items in a separate list for submission. The only concern is when checking the list on submission , check if(d.isChecked), so that it ignores the falsy values(false/undefined).