AngularJS 使用 ng-repeat 时的数据绑定

Question

如果问题标题很尴尬，我深表歉意。我需要帮助了解如何在特定情况下执行正确的数据绑定。我有一个 object 我称之为 TimesheetData 这个 object 存储一个字符串，它是像 6/13/2016 这样的星期，它还有一个 weekData 的数组，它存储 objects 有一个 id，然后是一周中每一天的工作时间。

我正在使用 ng-repeat 用可选的一周数据填充下拉列表 select，但我不知道如何在本周下方 table selection 的值为 selected，这是一个日期。

在下面的代码中，我需要以某种方式更新 <td> 标签中的数据，以与 object 中存储的数据相对应，该数据的 weekOf 等于 select 一个。我相信解决方案是使用 select 标记中 selected 项的索引从数组中绑定 table 中的数据。

任何人都可以告诉我如何获得该索引。

dash.TimesheetData.WeekData[x].xyz x 是来自 select 标签的值，它是 selected 索引。

以下部分代码供参考：

<h2>Week of {{dash.TimesheetData.WeekOf}}</h2>
            <p>
                Week
                <select style="color:black;" data-ng-model="dash.TimesheetData.WeekOf">
                    <option data-ng-repeat="options in dash.TimesheetData.WeekData" value="{{options.WeekOf}}">{{options.WeekOf}}</option>
                </select>
            </p>
            <div class="table-responsive">
                <div class="table-hover table-striped">
                    <style>
                        .table td {
                            text-align: center;
                        }

                        .table th {
                            text-align: center;
                        }
                    </style>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Monday</th>
                                <th>Tuesday</th>
                                <th>Wednesday</th>
                                <th>Thursday</th>
                                <th>Friday</th>
                                <th>Saturday</th>
                                <th>Sunday</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>{{dash.TimesheetData.WeekData[0].ID}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Monday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Tuesday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Wednesday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Thursday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Friday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Saturday}}</td>
                                <td>{{dash.TimesheetData.WeekData[0].Sunday}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

时间表object供参考：

function WeekObject(ID, Mon, Tue, Wed, Thur, Fri,Sat,Sun, WeekOf) {
    this.ID = ID;
    this.Monday = Mon;
    this.Tuesday = Tue;
    this.Wednesday = Wed;
    this.Thursday = Thur;
    this.Friday = Fri;
    this.Saturday = Sat;
    this.Sunday = Sun;
    this.WeekOf = WeekOf;
};

this.TimesheetData = {
    WeekOf: '',
    WeekData: [
        new WeekObject(1,7,4,4,4,1,0,0, '6/13/2016'),
        new WeekObject(2,5,6,2,8,1,2,0,'6/20/2016')
   ],
};

Answer 1

可以写一个函数，根据下拉改变table中的内容。

我在下拉菜单中使用了 ng-change 指令。请找到正在工作的 plunker，并请回复您的发现。

<select style="color:black;" data-ng-model="TimesheetData.WeekOf" ng-change="changeTable()">
      <option ng-repeat="day in array" value="{{day}}">{{day}}</option>

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

app.controller('MainCtrl', function($scope) {
  $scope.array = ["mon", "tue", "wen", "thu"];

  function WeekObject(ID, Mon, Tue, Wed, Thur, Fri, Sat, Sun, WeekOf) {
    this.ID = ID;
    this.Monday = Mon;
    this.Tuesday = Tue;
    this.Wednesday = Wed;
    this.Thursday = Thur;
    this.Friday = Fri;
    this.Saturday = Sat;
    this.Sunday = Sun;
    this.WeekOf = WeekOf;
  }

  $scope.TimesheetData = {
    WeekData: [
      new WeekObject(1, 7, 4, 4, 4, 1, 0, 0, '6/13/2016'),
      new WeekObject(2, 5, 6, 2, 8, 1, 2, 0, '6/20/2016'),
      new WeekObject(3, 5, 6, 2, 8, 1, 2, 0, '6/20/2016'),
      new WeekObject(4, 5, 6, 2, 8, 1, 2, 0, '6/20/2016')
    ],
  };

  $scope.changeTable = function(index) {
    for (var i = 0; i < $scope.array.length; i++) {
      var test = $scope.array[i];
      if (test === $scope.TimesheetData.WeekOf) {
        $scope.row = $scope.TimesheetData.WeekData[i];
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <h2>Week of {{TimesheetData.WeekOf}}</h2>
            <p>
                Week
                <select style="color:black;" data-ng-model="TimesheetData.WeekOf" ng-change="changeTable()">
                    <option ng-repeat="day in array" value="{{day}}">{{day}}</option>
                </select>
            </p>
            <div class="table-responsive">
                <div class="table-hover table-striped">
                    <style>
                        .table td {
                            text-align: center;
                        }

                        .table th {
                            text-align: center;
                        }
                    </style>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Monday</th>
                                <th>Tuesday</th>
                                <th>Wednesday</th>
                                <th>Thursday</th>
                                <th>Friday</th>
                                <th>Saturday</th>
                                <th>Sunday</th>
                                <th>WeekOf</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>{{row.ID}}</th>
                                <th>{{row.Monday}}</th>
                                <th>{{row.Tuesday}}</th>
                                <th>{{row.Wednesday}}</th>
                                <th>{{row.Thursday}}</th>
                                <th>{{row.Friday}}</th>
                                <th>{{row.Saturday}}</th>
                                <th>{{row.Sunday}}</th>
                                <th>{{row.WeekOf}}</th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!--{{TimesheetData.WeekData[0].ID}}-->
  </body>

</html>

</select>

$scope.changeTable = function(index){
for (var i=0; i<$scope.array.length;i++)
{
  var test = $scope.array[i];
  if( test === $scope.TimesheetData.WeekOf)
  {
  $scope.row= $scope.TimesheetData.WeekData[i];
  }
}}

请注意上面的代码。

Answer 2

我还建议查看用于填充 select HTML 元素的 ng-options 指令。正如您从 link 中看到的那样，您可以将周限制在 ng-model 范围变量中。

https://docs.angularjs.org/api/ng/directive/select

AngularJS 使用 ng-repeat 时的数据绑定

AngularJS data binding when using ng-repeat

angularjs

2-way-object-databinding