Click here to Skip to main content
14,608,023 members
Rate this:
Please Sign up or sign in to vote.
See more:
I am facing a problem in angularjs. There have dynamic checkbox when i checked a checkbox corresponding data are populate in a div that is OK. But when i checked another check box data are come in a div and replaced the previous div record. that is first div record replace with new div record. I need individual div record with there corresponding checkbox checked value.please help me ?

What I have tried:

I am facing a problem in angularjs. There have dynamic checkbox when i checked a checkbox corresponding data are populate in a div that is OK. But when i checked another check box data are come in a div and replaced the previous div record. that is first div record replace with new div record. I need individual div record with there corresponding checkbox checked value.please help me ?
Posted
Updated 6-Sep-16 2:42am
Comments
NaibedyaKar 6-Sep-16 8:26am
   
Bit not clear on the requirements.
subrata kar 6-Sep-16 8:42am
   
I am populating dynamic list of checkbox and there corresponding <Div></div>. When i checked a checkbox corresponding division will show with passing checkbox id and when unchecked division will close. The problem is that when i checked a check box division data show in same time checked another check box then another division data show it's ok but 1st division data replace by next division data.
--------------------------------------------------------
<tr ng-repeat="eachworkflowitem in WorkFlowlist">

<td>

<input type="checkbox" name="WorkFlowlist" ng-change="ActivityListByWorkflowId($event, eachworkflowitem.WorkFlowId)"
value="'{{eachworkflowitem.WorkFlowId}}'" ng-model="checkedGroupIds[eachworkflowitem.WorkFlowId]" />{{ eachworkflowitem.WorkFlowName }}

<div id="WF_{{eachworkflowitem.WorkFlowId}}" ng-show="checkedGroupIds[eachworkflowitem.WorkFlowId]">

<!--ActiviyListForEachWorkflow-->

<div class="box box-solid" >
<div class="box-header">
<!--

{{eachworkflowactivityitem.WorkFlowName}}

-->
</div>
<div class="box-body">

<div class="box-body">
<input type="hidden" name="ActivityCount" />
<table class="table">
<thead>
<tr>
<th>
Activity Name
</th>
<th>
Lead Time
</th>
<th>
Vendor
</th>
</tr>
</thead>

<tr ng-repeat="eachActivityitem in ActivityList">
<td>
<input type="hidden" name="ActivityID" value="{{eachActivityitem.Activity_ID}}" />
<input type="hidden" name="ProjectTypeID" value="{{eachActivityitem.Project_Type_ID}}" />
{{eachActivityitem.Activity_Name}}
</td>
<td><input type="Text" name="Lead_Time" value="{{eachActivityitem.Lead_Time

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

It's always good to go back to basics - that is, real javaScript, and learn what it is you're actually doing (or, in this case, the angularjs framework is doing).

Checking/unchecking a checkbox causes an event. This can be used (handled) to run a javaScript function. That function directly (or indirectly, such as via AJAX) can be used to modify the content of your page. The item on the page that would be modified (the target) will need to have a unique ID value. Using the DOM functionality of javaScript, you update the contents of your DIV element, selecting exactly which one you wish to update by its unique ID.

Another checkbox would also fire an event and this should be handled as well. It could be the same event handler as the first checkbox or have its own. If you wish to use the same event handler (efficient) then you need to pass the ID to the handler so it knows which checkbox was checked. Then, using a switch statement, you can target the updating of the correct DIV with the correct text.

Tutorials: JavaScript Tutorial[^] and within that tutorial, JavaScript HTML DOM Examples[^]

   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100