Verileri çaprazlamak için açısal bağlama tablosu

Question

Temel olarak, tablodaki noktanın kesişimine dayanan bir değer tablosuna iki yönlü bağlamaya çalışıyorum. Buraya ulaşmak için çalışıyorum şeyin bir plnkr kurdum

... bu veriler seti verilen

Angular Bind To Value Table

Yani

...

$scope.beers = [ 
{ id: 27, description: "Hopslam Ale" }, 
{ id: 28, description: "Founders Kentucky Breakfast Stout" }, 
{ id: 29, description: "Zombie Dust" } ]; 

$scope.characteristics = [ 
{ id: 3, description: "ABV" }, 
{ id: 4, description: "IBU" }, 
{ id: 5, description: "Calories" }, 
{ id: 6, description: "Reviews"}]; 

$scope.crossData = [ 
{ beerId: 27, characteristicId: 3, value: 10 }, 
{ beerId: 27, characteristicId: 4, value: 70 }, 
{ beerId: 27, characteristicId: 5, value: 300 }, 
{ beerId: 27, characteristicId: 6, value: 3419 }, 
{ beerId: 28, characteristicId: 3, value: 11 }, 
{ beerId: 28, characteristicId: 4, value: 70 }, 
{ beerId: 28, characteristicId: 5, value: 336 }, 
{ beerId: 28, characteristicId: 6, value: 2949 }, 
{ beerId: 29, characteristicId: 3, value: 6 }, 
{ beerId: 29, characteristicId: 4, value: 50 }, 
{ beerId: 29, characteristicId: 5, value: 186 }, 
{ beerId: 29, characteristicId: 6, value: 1454 }]; 

Ben nasıl İki yönlü çapraz verilerdeki değere bağlanır mı?

<table class="table table-striped"> 
    <thead> 
    <tr> 
     <th>#</th> 
     <th ng-repeat="char in characteristics"> 
     {{ char.description }} 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="beer in beers"> 
     <td>{{ beer.description }}</td> 
     <td ng-repeat="char in characteristics"> 
     <!-- some kind of binding expression here --> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Herhangi bir yardım büyük memnuniyetle karşılanacaktır.

<span ng-repeat="cross in crossData" ng-if="cross.beerId === beer.id && cross.characteristicId === char.id">{{cross.value}}</span> 

Ama başka bir veri yapısını olsaydı daha iyi olurdu, ama bu konuda hiçbir etkisi var sanırım:

Answer 1

Son cevabım için üzgünüm. İki yönlü veri ihtiyacını göremedim. http://plnkr.co/edit/M1rnx6IJqJ95apJJ55iN

<tbody> 
    <tr ng-repeat="beer in beers"> 
    <td>{{ beer.description }}</td> 
    <td ng-repeat="char in characteristics"> 
     <input ng-model="(crossData | filter:{beerId: beer.id, characteristicId: char.id})[0].value"/> 
    </td> 
    </tr> 
</tbody> 

2 - Bu crossData filtrelemek için bir işlevini kullanır: Bu bir filtre html üzerinde crossData -

Yani, iki çözüm

1 buldum http://plnkr.co/edit/MHQy31rqZMg2TXYn0P23

Yaptığım şey, crossData listesinin nesnesini döndürmek için bir işlev eklemekti. İşlev şu şekildedir: denetleyicinize $ filtresini yüklemeyi unutmayın.

Son olarak, aşağıdaki gibi bir değer bağlamak için tablo satırında bu işlevi kullanabilirsiniz:

<td ng-repeat="char in characteristics"> 
    <input type="text" ng-model="getCrossDataRow(beer.id, char.id).value" /> 
</td> 

Answer 2

Bu ifade ile bu yapabilirdi?

Answer 3

Sen (şu anki uygulama sadece ilk maçı döndüren) böyle denetleyici bir 'eşleştirme' fonksiyonunu yazabiliriz:

$scope.findMatch = function(beer, characteristic) { 
    return $scope.crossData.filter(function(data) { 
     return data.beerId === beer.id && data.characteristicId === characteristic.id 
    })[0]; 
    } 

Çalışma kod parçacığını:

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 

 
    $scope.beers = [ 
 
    { id: 27, description: "Hopslam Ale" }, 
 
    { id: 28, description: "Founders Kentucky Breakfast Stout" }, 
 
    { id: 29, description: "Zombie Dust" } ]; 
 
    
 
    $scope.characteristics = [ 
 
    { id: 3, description: "ABV" }, 
 
    { id: 4, description: "IBU" }, 
 
    { id: 5, description: "Calories" }, 
 
    { id: 6, description: "Reviews"}]; 
 
    
 
    $scope.crossData = [ 
 
    { beerId: 27, characteristicId: 3, value: 10 }, 
 
    { beerId: 27, characteristicId: 4, value: 70 }, 
 
    { beerId: 27, characteristicId: 5, value: 300 }, 
 
    { beerId: 27, characteristicId: 6, value: 3419 }, 
 
    { beerId: 28, characteristicId: 3, value: 11 }, 
 
    { beerId: 28, characteristicId: 4, value: 70 }, 
 
    { beerId: 28, characteristicId: 5, value: 336 }, 
 
    { beerId: 28, characteristicId: 6, value: 2949 }, 
 
    { beerId: 29, characteristicId: 3, value: 6 }, 
 
    { beerId: 29, characteristicId: 4, value: 50 }, 
 
    { beerId: 29, characteristicId: 5, value: 186 }, 
 
    { beerId: 29, characteristicId: 6, value: 1454 }]; 
 
    
 
    $scope.name = 'Stack Overflow friends'; 
 

 
    $scope.findMatch = function(beer, characteristic) { 
 
    return $scope.crossData.filter(function(data) { 
 
     return data.beerId === beer.id && data.characteristicId === characteristic.id 
 
    })[0]; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="plunker" ng-controller="MainCtrl"> 
 
    <p>Hello {{name}}!</p> 
 
    <br /> 
 
    <table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th ng-repeat="char in characteristics"> 
 
      {{ char.description }} 
 
     </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="beer in beers"> 
 
     <td>{{ beer.description }}</td> 
 
     <td ng-repeat="char in characteristics"> 
 
      {{findMatch(beer, char).value}} 
 
     </td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body>