Menu
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
404
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?
120
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
26
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>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
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
