How get dynamic JSON data using chekboxes in Angular JavaScript?

Question

I am struggling so much and find so many links and articles but can't get solution. I have an array like that

$scope.cols=[
   {"dpname":"partname","search":'',"qparam":''},
   {"dpname":"partid","search":'',"qparam":''},
   {"dpname":"partdesc","search":'',"qparam":''}
]; 

I am displaying array using ng-repeat as well as I repeat checkboxes also. When I click paricular check box one text box should open. The given ng-model value in text box is replaced by that particular check box

Here I attached my fiddle link which I tried: http://jsfiddle.net/soumyagangamwar/3dygzn8e/

Answer 1

I tweaked your files in this link

jsfiddle.net/3dygzn8e/1/

basically what I did is the following:

1. add a new column to the array called ischeched and default it to false. this represent the checkbox check state
2. bind the checkbox to col.ischecked
3. I changed the textbox ng-show condition to be ng-show="col.ischecked"

Answer 2

Have a look at this Fiddle

Although you have not clearly mentioned what you want in the question. But if you want each item to have its own text box then the above fiddle should answer your question.

<span ng-if="displayName">
   <input type="checkbox" id="searchName{{$index}}" ng-model="searchname[$index]" ng-change="changeColVisibility(col)">
</span>

<div ng-show="col.show">
  <input type="text" ng-model="name">
  <input type="button" value="submit" ng-click="setName(col)">
</div>

You should try not to use the index and should rather use more of the 2 way binding that comes with angular. Both to show and hide the text box and to save data in models rather than creating loads of functions to do it.