Duplicate value in multiple textarea while using ng-repeat

[siladityamishra]

Hi Guys,

We have created multiple textarea field by using ng-repeat, the field are getting display as intended. However while entering a value in one textarea field the value are appearing in other textarea as well, while we are not typing on the other textarea. This may be due to using ng-repeat to display multiple field. We want each and every textarea field to be behave independently.

HTML code:    

<div ng-repeat="approval in data.approvals" class="sp-approval m-b">
           <div class="row">
               <div ng-class="contentColClass">
<div ng-if="!options.portal" class="col-sm-3">
                   <button name="approve" ng-if="approval.state == 'requested'" class="btn btn-primary btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id);">${Approve}</button>
                   <button name="reject" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id);" ng-disabled="approval.task.number.startsWith('RITM') && !data.comment || data.isPosting ">${Reject}</button>
                   <textarea   sn-resize-height="trim"   id="post-input" ng-if="approval.task.number.startsWith('RITM') && approval.state == 'requested'" class="form-control no-resize" ng-model="data.comment" placeholder="${Rejection reason}..." autocomplete="off" ng-change="userTyping(data.comment)"/>
                 <span class="input-group-btn" style="vertical-align: buttom">
               </span>
</div>
</div>
</div>
</div>

I have attached a screenshot of the view that we are getting.

Any suggestions or ideas will help me a lot.

[larstange · Accepted solution]

Hi

you are binding all the text areas to the same model "data.comment", so when you update one, the other will be updated as well.

You could create a an array as data.comment = [] instead and then map each to a different location in the array

ng-model="data.model[$index]"

[siladityamishra]

Hi Lars,

Thanks for the help.

It is working fine but while storing the value in Server side I am getting only object type. Do you know how to convert the value into and store them in comments fields.

if (input && input.op && input.comment) {
   var app = new GlideRecord("sysapproval_approver");
   if (app.get(input.target)) {
       app.state = input.op;
   if (input.comment){
   if (app.canWrite('comments')){
   var commentss = input.comment.toArray();
   gs.addInfoMessage("Comments value: "+commentss);
   app.setDisplayValue('comments',input.comment);

   }
   }
       app.update();
   }

[larstange]

Hi

The easy way is to convert the array to a comma seperated list

var comments = input.comment.join(',');

The more refined is to loop through the array:

var comments = '';

for (var i=0; i< input.comment.length; i++) {

        comments = "Comment " + i + ":\n" + input.comment[i] + "\n";

}

[siladityamishra]

Hi Lars,

I tried to do that same but unable to achieve it .

Can you please have a look at the code and let me know where I am doing wrong.

HTML:

<div ng-if="!options.portal" class="col-sm-3">
                   <button name="approve" ng-if="approval.state == 'requested'" class="btn btn-primary btn-block" style="border-width:1px;" ng-click="approve(approval.sys_id);">${Approve}</button>
                   <button name="reject" ng-if="approval.state == 'requested'" class="btn btn-default btn-block" ng-click="reject(approval.sys_id);" ng-disabled="approval.task.number.startsWith('RITM') && !data.comment[$index] || data.isPosting ">${Reject}</button>
                   <textarea   sn-resize-height="trim"   id="post-input" ng-if="approval.task.number.startsWith('RITM') && approval.state == 'requested'" class="form-control no-resize" ng-model="data.comment[$index]" placeholder="${Rejection reason}..." autocomplete="off" ng-change="userTyping(data.comment[$index])"/>
                 <span class="input-group-btn" style="vertical-align: buttom">
               </span>

Client side:

function ($scope, spUtil, snRecordWatcher) {
   var c = this;
   for (var x in c.data.dates) {
   c.data.comment[x] = moment(c.data.comment[x]).format('ll').split(',')[0];
   }

Server side:

(function(){
if (input && input.op && input.comment) {
   var app = new GlideRecord("sysapproval_approver");
   if (app.get(input.target)) {
       app.state = input.op;
   if (input.comment){
   if (app.canWrite('comments')){
   var commentss = "";
   for (var i=0; i< input.comment.length; i++) {
       commentss = input.comment[i];
   }
   //gs.addInfoMessage("Comments value: "+commentss);
   app.setDisplayValue('comments',commentss);

   }
   }
       app.update();
   }
}

Thanks for the help until now.