1

私は一般的にAngular/JSフレームワークの初心者であり、動的テンプレートを使用してこの飛行機の座席データを表示しようとしていますが、機能していません。

このサイトのガイドに従ってみましたが、うまくいきませんでした。

「row.seats」がオブジェクト リテラルで、「row.rowLetter」が文字列の html は次のとおりです。

<tr ng-repeat="row in rows">
  <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter"></seat-item>
</tr>

これが私の指示です：

angular.module('myApp.directives', []).directive('seatItem', function($compile) {
  var template1 = '<td> {{thisrow}} {{thisseat.price}} </td>',
      template2 = '<td> seat unavailable </td>';

  var getTemplate = function(thisseat) {
    if(thisseat.isAvailable) {  // is a boolean property on seat object
      return template1;
    }
    return template2;
  }

  var linker = function(scope, element, attrs) {
    element.html(getTemplate(scope.thisseat)).show();
    $compile(element.contents())(scope);  // not sure what contents refers to...
  }

  return {
    restrict: 'E',
    replace: true,
    link: linker,
    scope: {
      thisseat: '=',
      thisrow: '@'
    }
  }
}

$scope.rows を設定しているコントローラーがありますが、このすべてのロジックをディレクティブに移動しようとすると (元々ビューで ng-ifs を使用していました)、機能しなくなりました。私が言えることから、私はリンカー関数の中にさえ入っていません（ディレクティブを入力していますが）。

リソースへのヘルプやリンクをいただければ幸いです。

4

2 に答える 2

0

ng-show ng-hide を使用します

例：

<tr ng-repeat="row in rows">
    <seat-item ng-repeat="seat in row.seats" thisseat="seat" thisrow="row.rowLetter">
        <td ng-show='seat.isAvailable'> {{thisrow}} {{thisseat.price}} </td>
        <td ng-show='!seat.isAvailable'> seat unavailable </td>
    </seat-item>
</tr>

表示/非表示がどのように機能するかについては、ドキュメントを参照してください

これは、テンプレートが何をするかについて、あなたのhtmlを読んでいる人にもより明確になります

于 2014-02-13T14:50:27.537 に答える