2017-01-18 15 views
7

Đây là Plunker tôi: https://plnkr.co/edit/rBGQyOpi9lS0QtnCUq4LKhông thể in dữ liệu từ ngRepeat'ed 'textarea`

Tôi muốn console.log() những gì đang được gõ vào mỗi thẻ textarea. Gõ vào một textarea kích hoạt printStuff() chức năng:

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

Khi tôi bắt đầu gõ vào bất kỳ textarea, tôi nhận được lỗi này:

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) 

Làm thế nào để khắc phục lỗi này?

CẬP NHẬT VỚI ĐÁP MannFromReno của

tôi vẫn nhận được lỗi. Đây là Plunker của tôi: https://plnkr.co/edit/WwC3kNiTQzaQfjp40h2a

+0

trong Plucker mới nhất của bạn, bạn đang gửi selected.index (số 0) để printStuff, và đối số cuối cùng của printStuff là một đối tượng "mục" có chỉ mục thuộc tính – progysm

+0

@progysm Làm cách nào để khắc phục sự cố này? Tôi vẫn còn khá mới với Angular, nên tôi không biết phải làm gì ... – Username

Trả lời

5

Tôi không nhận được nó ở đâu bạn nhận được thuộc tính index. Bạn có thể sử dụng $index (được cung cấp bởi ng-repeat).

Xem cập nhật plunker: https://plnkr.co/edit/rOTUoLDWX195Uh0JBXwj

Đây là hành vi gì bạn muốn, là tôi phải không?

2

Cập nhật textarea bạn ràng buộc như

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

và printStuff chức năng của bạn

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

Một trong những sai lầm mà bạn đã làm là, liên kết với các tài sản item.index đó không tồn tại. Bạn có thể sử dụng $ index bên trong phạm vi ng-repeat sẽ cung cấp cho bạn chỉ số hiện tại của sự lặp lại.

Xem điều này plnkr

2

Bạn có thể thử bên dưới.

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

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

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

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

 
\t \t \t $scope.removeChart= \t function(){ 
 
\t \t \t \t $scope.items.splice(-1,1); 
 
\t \t \t }; 
 
$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); 
 
      } 
 
     }); 
 
} 
 

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

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

1

Cập nhật nó để:

<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-mô hình nên là tài sản dữ liệu trong đối tượng tùy chỉnh và không phải là đối tượng chính nó như là ngModel

Dưới đây là một Plunker làm việc : https://plnkr.co/edit/lqA5Fg8UAz81IM9v3Kts?p=preview

+0

Tôi không chắc chắn sự khác biệt giữa câu trả lời của bạn và câu trả lời tôi đã chấp nhận vài ngày trước. Bạn có thể giải thích? – Username

+0

Ồ, tôi đã không kiểm tra câu trả lời được chấp nhận thực sự, tôi chỉ đọc bạn nói rằng bạn vẫn có lỗi và đăng giải pháp. –

1

qua $index từ ui như tham số để printStuff chức năng

<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

Các vấn đề liên quan