how to link/add modal value with in existing json object in angular js

Question

below is the html:

<tr ng-repeat-start="select in selection">
    <td style="overflow: hidden;">{{select.name}}</td>
    <td style="overflow: hidden;">{{select.type}}</td>
    <td style="overflow: hidden;">{{select.application}}</td>
    <td>
        <image ng-src="{{commentImg}}" width="20" height="20" ng-click="selectComment()"></image>
    </td>
</tr>

selectComment opens modal which has textarea. Selection array has 3 key/value per object(i.e. name,type, application). i want to add textarea value as fourth key/value in every object to selection json object.

below is the modal:-

   <div class="dialog-panel3">
    <div class="page-title">
        Comments
    </div>
    <br>
    <form name="commentForm">
        <textarea class="textarea" ng-model="inputValue" required></textarea>
        <br>
        <br>
        <button ng-click="comment(inputValue)" ng-disabled="commentForm.$invalid">Save</button>&nbsp;&nbsp
        <button ng-click="close()">Cancel</button>
    </form>

</div>

Please suggest.

Vivz · Accepted Answer · 2017-08-01 12:31:59Z

1

On click of the image which opens the modal, you can save the corresponding index of your JSON object. Create ng-model for your textarea using this index to help you link the value with your existing JSON array object.

HTML:

<tr ng-repeat-start="select in selection">
    <td style="overflow: hidden;">{{select.name}}</td>
    <td style="overflow: hidden;">{{select.type}}</td>
    <td style="overflow: hidden;">{{select.application}}</td>
    <td>
        <image ng-src="{{commentImg}}" width="20" height="20" ng-click="selectComment($index)"></image>
    </td>
</tr>

Contoller

$scope.selectComment=function(index){
  $scope.selection[index].textAreaVal="";
  $scope.selectedIndex=index;
}

Modal:

<div class="dialog-panel3">
    <div class="page-title">
        Comments
    </div>
    <br>
    <form name="commentForm">
        <textarea class="textarea" ng-model="selection[selectedIndex].textAreaVal" required></textarea>
        <br>
        <br>
        <button ng-click="comment(selection[selectedIndex].textAreaVal)" ng-disabled="commentForm.$invalid">Save</button>&nbsp;&nbsp
        <button ng-click="close()">Cancel</button>
    </form>

</div>

edited Aug 1, 2017 at 12:31

answered Jul 28, 2017 at 10:24

Vivz

6,6282 gold badges19 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

ABA Over a year ago

how to save the corresponding index of JSON object On click of the image and when i cick on the save button it should add textarea value in json object as new key/value., could you please elaborate

Vivz Over a year ago

When you click the image , this function will be called selectComment(), pass the corresponding $index from ng-repeat and save it in a variable(selectedIndex in my answer) and use this to map ur texarea ng-model to the JSON object

ABA Over a year ago

No, it is not working, may be i am using the wrong index variable here :- <image ng-click="selectComment($index)"></image> could you please suggest what should be the index variable here?

Vivz Over a year ago

Are you saving the index inside selectComment($index) function in a new variable like I did. $index is the iterator for ng-repeat. For more info docs.angularjs.org/api/ng/directive/ngRepeat

ABA Over a year ago

Thanks @Vivz, you rock!!

|

Collectives™ on Stack Overflow

how to link/add modal value with in existing json object in angular js

1 Answer 1

19 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Related