Unable to display information from a repeated `textarea` in ngRepeat

Question

Unable to display information from a repeated `textarea` in ngRepeat

Check out my code on Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L

I'm trying to log the content of each textarea when typing, using the printStuff() function:

$scope.printStuff = function(customize, item) {
    console.log(customize[item.index].data);
};

However, I encounter an error message once I start typing in a textarea:

angular.js:14290 TypeError: Cannot read property 'data' of undefined
    at b.$scope.printStuff (index.html:31)
    at fn (eval at compile (angular.js:15118), <anonymous>:4:299)
    at b.$eval (angular.js:17922)
    at angular.js:25653
    at Object.<anonymous> (angular.js:28429)
    at q (angular.js:325)
    at Object.$$writeModelToScope (angular.js:28427)
    at angular.js:28420
    at g (angular.js:28339)
    at f (angular.js:28322)

Any suggestions on how to resolve this issue?

AFTER FOLLOWING MannFromReno's ADVICE

The error still persists. Here is the updated Plunker link: https://plnkr.co/edit/WwC3kNiTQzaQfjp40h2a

javascript html angularjs

Answer 1

Answer №1

Can you clarify where the index property comes from? You might consider using the $index variable provided by ng-repeat.

Please refer to the updated plunker: https://plnkr.co/edit/fHJlQPWiD872Fy9fXhMs

Is this the desired behavior?

Answer 2

Can you clarify where the index property comes from? You might consider using the $index variable provided by ng-repeat.

Please refer to the updated plunker: https://plnkr.co/edit/fHJlQPWiD872Fy9fXhMs

Is this the desired behavior?

Answer 3

Answer №2

To update the binding of your textarea, follow these steps:

<textarea rows="6" cols="60" placeholder="Enter data here." ng-model="customize[$index].details" ng-change="displayContent($index)"></textarea>

Ensure that your displayContent function is as shown below:

$scope.displayContent = function(index) {
  console.log($scope.customize[index].details);
};

A common mistake was trying to bind to the item.index property, which does not exist. Instead, use $index within a ng-repeat loop to get the current iteration index.

For a working example, check out this demo

Answer 4

To update the binding of your textarea, follow these steps:

<textarea rows="6" cols="60" placeholder="Enter data here." ng-model="customize[$index].details" ng-change="displayContent($index)"></textarea>

Ensure that your displayContent function is as shown below:

$scope.displayContent = function(index) {
  console.log($scope.customize[index].details);
};

A common mistake was trying to bind to the item.index property, which does not exist. Instead, use $index within a ng-repeat loop to get the current iteration index.

For a working example, check out this demo

Answer 5

Answer №3

Check out the code snippet below for a solution:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);

app.controller("myCTRL",function($scope){
$scope.items=[{}];

$scope.customize=[{data: 'hi'}];

$scope.addChart=function(){
$scope.customize.push({
data: ''
});
};

$scope.removeChart=function(){
$scope.items.splice(-1,1);
};
$scope.removeWhichone = function(id, data){
  //$scope.customize.splice($scope.customize.indexOf(data), 1); 
  angular.forEach($scope.customize, function(value, key) {
            if (key === id){
                $scope.customize.splice(key, 1);
            }
        });
}

$scope.printStuff=function(customize,index){
//console.log(customize[index].data);
});
</script>;

<body ng-app="myApp" ng-controller="myCTRL">
<div>
<button ng-click="addChart()">Add</button>
<!--<button ng-click="removeChart()">Remove</button> -->
      
</div><br>
<div ng-repeat="item in customize">
<form novalidate>
<textarea rows="5" cols="50" placeholder="Paste data here." ng-model="customize[$index].data" ng-change="printStuff(customize,$index)"></textarea>
<button ng-click="removeWhichone($index, item)">Remove</button>
<br><br>
</form>

</div>
{{customize}}
</body>

Answer 6

Check out the code snippet below for a solution:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("myApp",[]);

app.controller("myCTRL",function($scope){
$scope.items=[{}];

$scope.customize=[{data: 'hi'}];

$scope.addChart=function(){
$scope.customize.push({
data: ''
});
};

$scope.removeChart=function(){
$scope.items.splice(-1,1);
};
$scope.removeWhichone = function(id, data){
  //$scope.customize.splice($scope.customize.indexOf(data), 1); 
  angular.forEach($scope.customize, function(value, key) {
            if (key === id){
                $scope.customize.splice(key, 1);
            }
        });
}

$scope.printStuff=function(customize,index){
//console.log(customize[index].data);
});
</script>;

<body ng-app="myApp" ng-controller="myCTRL">
<div>
<button ng-click="addChart()">Add</button>
<!--<button ng-click="removeChart()">Remove</button> -->
      
</div><br>
<div ng-repeat="item in customize">
<form novalidate>
<textarea rows="5" cols="50" placeholder="Paste data here." ng-model="customize[$index].data" ng-change="printStuff(customize,$index)"></textarea>
<button ng-click="removeWhichone($index, item)">Remove</button>
<br><br>
</form>

</div>
{{customize}}
</body>

Answer 7

Answer №4

Revise like this:

<div ng-repeat="item in items" ng-init="index = $index;">
    <form novalidate>
        <textarea rows="5" cols="50" placeholder="Paste data here." ng-model="customize[index].data" ng-change="printStuff(customize, selected.index)"></textarea>
        <br>
    </form>
</div>

The ng-model should refer to the 'data' property inside the customize object rather than the object itself as ngModel.

You can see a demonstration on Plunker: https://plnkr.co/edit/lqA5Fg8UAz81IM9v3Kts?p=preview

Answer 8

Revise like this:

<div ng-repeat="item in items" ng-init="index = $index;">
    <form novalidate>
        <textarea rows="5" cols="50" placeholder="Paste data here." ng-model="customize[index].data" ng-change="printStuff(customize, selected.index)"></textarea>
        <br>
    </form>
</div>

The ng-model should refer to the 'data' property inside the customize object rather than the object itself as ngModel.

You can see a demonstration on Plunker: https://plnkr.co/edit/lqA5Fg8UAz81IM9v3Kts?p=preview

Answer 9

Answer №5

When passing the $index variable from the user interface to the printStuff function, remember to include it as a parameter.

<form novalidate>
     <textarea rows="5" cols="50" placeholder="Paste data here." ng-model="$scope.customize[$index]" ng-change="printStuff(customize,item,$index)"></textarea>
    <br>
</form>

$scope.printStuff = function(customize, item, index){
    console.log(customize[index].data);
};

https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L?p=preview

Answer 10

When passing the $index variable from the user interface to the printStuff function, remember to include it as a parameter.

<form novalidate>
     <textarea rows="5" cols="50" placeholder="Paste data here." ng-model="$scope.customize[$index]" ng-change="printStuff(customize,item,$index)"></textarea>
    <br>
</form>

$scope.printStuff = function(customize, item, index){
    console.log(customize[index].data);
};

https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L?p=preview

Unable to display information from a repeated `textarea` in ngRepeat

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Tips for testing nested HTTP calls in unit tests

Display PickerIOS when a button is clicked in a React Native application

Can user-generated code execute Javascript Promises in its entirety?

Removing the gap between the clicked point and the draw point in Html5 canvas

Idle Time in Nextjs - Making the Most of D

I'm trying to set it up so that an image pops up when I hover over text. I've tried incorporating a few different JavaScripts, but I still can

jquery, slideToggle not behaving correctly on mouse hover

Sending a collection of nested arrays to an MVC controller

In which specific location within the Bootstrap CSS files can the `footer` class be found?

Learn how to retrieve the value of an associated field at a specific index by utilizing a combo box in JavaScript when receiving a JSON response

What occurs when the update function returned by React.useState() is invoked?

Enhance an item by introducing additional properties derived from its current key-value pairs

What could be the reason for the absence of the back button?

Does the webworker function as a multi-thread?

Durandal attempts to retrieve a view located within the viewmodel directory

Obtain a transformed mesh that has been displaced using a displacementMap within three.js

What is the best way to optimize angular code for production environments?

Guide to Embedding a SQL Table into an HTML Table

position the input and span elements side by side

Encountered an issue while executing the next build process