Here is my Plunker: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L
I want to console.log() what is being typed in each textarea tag. Typing in a textarea triggers the printStuff() function:
$scope.printStuff= function(customize,item){ console.log(customize[item.index].data); }; When I start typing in any textarea, I get this error:
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) How do I fix this error?
UPDATED WITH MannFromReno's ANSWER
I still get the error. Here is my Plunker: https://plnkr.co/edit/WwC3kNiTQzaQfjp40h2a
5 Answers
Answers 1
I don't get it where do you get the index property. You could use $index (provided by ng-repeat).
See updated plunker: https://plnkr.co/edit/rOTUoLDWX195Uh0JBXwj
This is the behavior what you want, am I'm right?
Answers 2
Update your textarea binding like
<textarea rows="5" cols="50" placeholder="Paste data here." ng-model="customize[$index].data" ng-change="printStuff($index)"></textarea> and your printStuff function
$scope.printStuff = function(index) { console.log($scope.customize[index].data); }; One of the mistakes that you were making is, binding to the item.index property which didn't exist. You can use $index inside ng-repeat scope which will give you the current index of iteration.
See this plnkr
Answers 3
You can try below.
<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>Answers 4
Update it to:
<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> ng-model should be the data property within customize object and not the object itself as ngModel
Here's a working Plunker: https://plnkr.co/edit/lqA5Fg8UAz81IM9v3Kts?p=preview
Answers 5
pass $index from the ui as parameter to printStuff function
<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); }; 
0 comments:
Post a Comment