Question

基本上我试图基于表格中的交点双向绑定到值表。

我已经建立了一个我想在这里实现的目标......

所以给出了这组数据......

$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 }];

如何双向绑定到交叉数据中的值？

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

非常感谢任何帮助。

Answer 1

对不起，我的上一个答案。我没有注意到双向数据绑定的需要。

所以，我找到了两个解决方案

1 - 这个过滤了html上的crossData：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 - 这个使用函数来过滤crossData：http://plnkr.co/edit/MHQy31rqZMg2TXYn0P23

我所做的是添加一个函数来返回crossData列表的对象。功能如下：

$scope.getCrossDataRow = function(beerId, charId){
    return $filter('filter')($scope.crossData, {beerId: beerId, characteristicId: charId})[0];
};

不要忘记在控制器中加载$ filter。

最后，您可以在表格行中使用此函数来绑定值，如下所示：

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

Answer 2

您可以使用以下表达式执行此操作：

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

但是如果你有另一个数据结构会更好，但我想你对此没有影响吗？

Answer 3

你可以像这样在控制器中编写一个'匹配'函数（当前实现只返回第一个匹配）：

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

工作代码段：

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>

Angular绑定表来交叉数据

3 个答案: