2016-04-14 11 views
1

Köşeli js'de yeni olmak, yalnızca temel bir örneğini denemek & bu soruna rastladı.ng modelinin değerini alamadı (ng-yineleme ile kullanıldı)

json array veri kaynağı olan ng-repeat kullanarak bir tablo oluşturuyorum. Tabloda bir miktar sütunu ve bir ekleme düğmesi vardır.

Ekleme düğmesini tıklattığımda nicelik değerini artırmak istiyorum.Benim, ng-model no'lu bağlama değerini artırırsam iki yönlü bir veri bağlaması olduğundan, bu görünümde olmayan görünümünde yansıyor oluyor

JS

angular.module('DemoApp',[]).controller('TableController',['$scope',function($scope){ 
    $scope.dataset = [json data ]; 
     $scope.add = function($event){ 
     // get $scope.bookQuantity,add 1 
     var _m =$scope.bookQuantity; 
     console.log(_m) // consoling undefined; 
     } 
    }]) 

Ben sorunu çözmek mümkün değildir hala bu link ama izledi.

Bu sorunu anlamanıza yardımcı olabilecek bu Plunker'u oluşturdum.

+0

hiçbir 'bookQuantity' yoktur' $ scope' – Rayon

+0

'tr' değil kapalı .. – Rayon

+0

Daha geniş bir sahnedeki soru, kitabı nasıl alabilirim? Ben ng-model = data.bookQuantity bağlanıyorum. Ayrıca tr kapattılar ve bağlantıyı güncellediler – brk

cevap

1

bunu yapmayı deneyin. Bunun için çözümünüzü değiştirmelisiniz. Fonksiyon olarak parametre olarak bookId'u geçiyorum ve işlem yapıldığında dizideki bookQuantity alanı.

// Code goes here 
 

 
angular.module('DemoApp',[]).controller('TableController',['$scope',function($scope){ 
 
    
 
    $scope.dataset = [{ 
 
bookId: "1001", 
 
bookName: "Wings", 
 
bookPrice: 224, 
 
bookQuantity: 4 
 
    },{ 
 
bookId: "1002", 
 
bookName: "Turning", 
 
bookPrice: 142, 
 
bookQuantity: 3 
 
},{ 
 
bookId: "1003", 
 
bookName: "Playing", 
 
bookPrice: 402, 
 
bookQuantity: 2 
 
},{ 
 
bookId: "1004", 
 
bookName: "Steve Jobs", 
 
bookPrice: 418, 
 
bookQuantity: 2},{ 
 
bookId: "1005", 
 
bookName: "History", 
 
bookPrice: 207, 
 
bookQuantity: 2 
 
}] 
 
    
 
    $scope.add = function(bookId){ 
 
    angular.forEach($scope.dataset,function(item){ 
 
     
 
     if(item.bookId == bookId) 
 
      item.bookQuantity = item.bookQuantity + 1; 
 
     }); 
 
    
 
    console.log($scope.dataset); 
 
    } 
 
    
 
    
 
    
 
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="DemoApp" ng-controller ="TableController" > 
 
    <table> 
 
     <thead></thead> 
 
     <tbody> 
 
     <tr ng-repeat="data in dataset"> 
 
      <td>{{data.bookId}}</td> 
 
      <td>{{data.bookName}}</td> 
 
      <td>{{data.bookPrice}}</td> 
 
      <td>{{data.bookQuantity}}</td> 
 
      <td><input type = "button" value ="Add" data-id ="{{data.bookId}}" ng-click = "add(data.bookId)"></td> 
 
      </tr> 
 
     </tbody> 
 
     
 
     
 
     
 
     </table> 
 
    </div>

+0

Pozelik ile ilişkili ng modelini değiştirecek ve görünümü güncelleyecek mi? – brk

+0

@ user2181397, Cevabımı güncelledim. –

+0

Bu konuyu çözümlemenin başka bir yolu olduğu için oy veriyorum. Bunu çözmek için – brk

0

bu deneyin: - *.html

<thead></thead> 
    <tbody> 
    <tr ng-repeat="data in dataset"> 
     <td>...</td> 
     ... 
     . 
     <td><input type = "button" value ="Add" data-id ="{{data.bookId}}" ng-click = "add(data)"></td> 
     </tr> 
    </tbody> 

*.js

$scope.add = function(record){ 
    record.bookQuantity = record.bookQuantity + 1; 
    console.log(record.bookQuantity); // consoling not undefined; 
} 
İlgili konular