无法从ngRepeat' ed`textarea`打印数据

时间:2017-01-18 21:54:25

标签: javascript html angularjs

这是我的Plunker:https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4L

我想console.log()每个textarea标记中输入的内容。输入textarea会触发printStuff()功能:

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

当我开始输入任何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)

如何解决此错误?

更新MannFromReno的答案

我仍然得到错误。这是我的Plunker:https://plnkr.co/edit/WwC3kNiTQzaQfjp40h2a

5 个答案:

答案 0 :(得分:5)

我不知道你在哪里获得index财产。您可以使用$index(由ng-repeat提供)。

请参阅更新的plunker:https://plnkr.co/edit/rOTUoLDWX195Uh0JBXwj

这就是你想要的行为,我是对的吗?

答案 1 :(得分:2)

更新您的textarea绑定,如

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

和你的printStuff函数

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

您所犯的一个错误是绑定到不存在的item.index属性。您可以在ng-repeat范围内使用$ index,它将为您提供当前的迭代索引。

请参阅此plnkr

答案 2 :(得分:2)

你可以在下面试试。

<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>

答案 3 :(得分:1)

将其更新为:

<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应该是customize对象中的data属性,而不是对象本身作为ngModel

这是一个有效的Plunker:https://plnkr.co/edit/lqA5Fg8UAz81IM9v3Kts?p=preview

答案 4 :(得分:1)

从ui作为参数传递$indexprintStuff函数

<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