0

コンテストのエントリを表示するテーブルがあります (PHP を使用して DB から取得し、AngularJS および JavaScript で使用する .json オブジェクトに変換します)。また、モーダルを実装して、「審査員」が各エントリをクリックすると、そのエントリの詳細が表示されるようにしたいと考えています。したがって、基本的には、1 行のデータをそのモーダル (ui.bootstrap モーダル) に渡す必要があります。

以下は、すべてのデータを含むテーブルのマークアップです。モーダルは ng-repeated に適用されます:

<table class="submissions">

<tr class="tb-header">
<td>id</td>
<td>wa #</td>
<td>name</td>
<td>email</td>
<td>file</td>
<td>rating</td>
<td>submitted on</td></tr>

    <tr ng-click="open()" ng-repeat="row in rows track by $index">

        <td>{{ row.id }}</td>
        <td class="wa-num">{{ row.wa_num }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.email }}</td>
        <td id="submitted-file">{{ row.file }}</td>
        <td>{{ row.rating }}</td>
        <td>{{ row.submitted }}</td>

    </tr>


</table>

そして、そのページ全体とモーダルを制御するコントローラーは次のとおりです。

.controller('dashboard',['$scope', '$rootScope', '$location', '$modal', 'loginService', 'getEntries',
          function($scope, $rootScope, $location, $modal, loginService, getEntries){

          $scope.open = function () {

              var modalInstance = $modal.open({
                  templateUrl: '/partials/submission_mod.html',
                  controller: ['$scope', '$modalInstance', function($scope, $modalInstance){
                      $scope.modalInstance = $modalInstance;

                      $scope.cats = "Submission info goes here.";
                  }]
              });
          };

          var entries = getEntries.entries();

              entries.save(
                  function(result){
                      console.log(result);

                      //$scope.rows = [];
                      $scope.rows = result.entries;
                      console.log($scope.rows);


                  },
                  function(result) {
                      console.log(result);
                  }

              );
    }])

そして、モーダルのマークアップは次のとおりです (現時点では、なんらかの理由で何も取り込んでおらず、ハードコードされた「猫」でさえありません):

<div class="modal-entry">{{ cats }}</div>
<button class="btn btn-primary btn-modal" ng-click="modalInstance.close()">Close</button>

質問は、そのモーダルにデータを渡すにはどうすればよいですか? クリックされた行のみをプルするようにターゲットにする方法など?

どんなガイダンスでも大歓迎です。

4

2 に答える 2

1

plinkrには、 Angular Bootstrap Directives Docsからそれを行う方法に関する情報があります。

解決したこのようなもの：

var modalInstance = $modal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl',
  size: size,
  resolve: {
    items: function () {
      return $scope.items;
    }
  }
});
于 2015-04-21T14:13:47.663 に答える
1

最良の方法は、行をパラメーターとしてモーダル関数に渡すことです。

<tr ng-click="open(row)" ng-repeat="row in rows track by $index">
  ...
</tr>

そして、あなたの機能で、行を受け取ります：

$scope.openModal = function (row) {
    var modalInstance = $modal.open({
        templateUrl: '/partials/submission_mod.html',
        controller: 'ModalCtrl',
        resolve: {
            cat: function () {
                return row;
            }
        }
    });
};

そして、コントローラーに渡します：

.controller('ModalCtrl', function ($scope, $modalInstance, cat) {
    $scope.cat = cat;
});
于 2015-07-06T18:09:05.593 に答える