Angular テキストの折りたたみおよび展開効果の簡単な実装

Angular のテキストの折りたたみと展開の効果も非常に興味深い機能です。この記事では主に Angular のテキストの折りたたみと展開のコンポーネントの原理分析を紹介します。これが非常に優れていると思います。皆さんのお役に立てれば幸いです。

この種のコンポーネントは実際にさまざまな場所で使用できます

展開されたエフェクト

折りたたまれたエフェクト

。まず、すべてのコードを入力します。使用するときは、表示する必要があるテキスト {{designer.des}} をルーターにバインドする必要があるデータに置き換えるだけです

.directive('textfold', function() {
    return {
      restrict: 'EA',
      template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,
      link: function(scope, element, attrs) {
        var height;
        var maxheight;
        function textfold() {
          height = angular.element(&#39;#textfold&#39;).height();
          maxheight = angular.element(&#39;#textfold&#39;).height();
        }
        scope.$watch(&#39;designer.des&#39;, function(data) {
          if (data) {
            textfold();
          }
        })
        var isExtend = true;
        scope.isMore = "折叠";
        scope.more = function() {
          var minheight = 23;
          if (isExtend) {
            if (height >= minheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height -= 10;
            } else {
              scope.isMore = "查看更多...";
              scope.$apply();
              isExtend = !isExtend;
              height += 10;
            }
          } else {
            if (height <= maxheight) {
              document.getElementById(&#39;textfold&#39;).style.height = height + "px";
              setTimeout(function() {
                scope.more();
              }, 1);
              height += 10;
            } else {
              scope.isMore = "折叠";
              scope.$apply();
              isExtend = !isExtend;
              height -= 10;
            }
          }
        }
      }
    }
  })

このコンポーネントを文ごとに説明します

まず、Angular のコンポーネント化されたテンプレートと使用モードを定義する必要があります

restrict: 'EA',
template: &#39;<p style="font-size: 14px; border-left:5px solid #dddddd; padding: 15px; padding-bottom: 10px; margin-bottom: 15px; margin-top: 15px;">&#39; + &#39;<span id="textfold" style="display:block; overflow:hidden;">{{designer.des}}</span>&#39; + &#39;<br />&#39; + &#39;<span style="color: #1bb7ac; position: relative; bottom: 10px;" ng-click="more(this)">{{isMore}}</span>&#39; + &#39;</p>&#39;,

EA は、要素と属性を使用してプラグインを DOM に表示できるということです。 の形式でこのコンポーネントを再利用することもできます。後でリンクを使用して関数を定義します

var height;
var maxheight;

これら 2 つの変数 1 つはこのときの折り畳み後の高さ (これは展開と折り畳みの過程で常に変化し、最終的に折り畳み後の minheight に等しくなります)、およびテキストを完全に展開したときの高さです

function textfold() {
          height = angular.element('#textfold').height();
          maxheight = angular.element('#textfold').height();
        }
        scope.$watch('designer.des', function(data) {
          if (data) {
            textfold();
            scope.more();
          }
        })

この 2 つ この文は実際には非常に重要です。テキストの高さを取得するときは、テキストの変化 (テキストが完全にレンダリングされた後の高さ) をキャプチャする必要があるため、scope.$ を使用します。 design.des の変更をキャプチャするために監視します。データが空でないとき、つまりテキストがレンダリングされた後、コールバック関数 textfold を実行して、現在のテキストの高さを取得します。レンダリング後のテキストの高さを取得するためにこのメソッドを一時的に試してみました

コールバックの代わりに順次実行した場合

if (data) {
            textfold();
          }

はspanタグのデフォルトの高さのみを取得します

ちょっとしたトリックを追加することもできますここに、scope.more();

angular.element('#textfold').height()

を追加します。この方法でページを作成できます。レンダリング後、最初に展開してから折りたたむと、ページに入るとデフォルトで折りたたまれた状態になります。プログラムでは、この効果を記述するとき、通常、テキストを展開して高さを取得し、その後、折りたたまれた状態に戻るようにします

var isExtend = true;次のscope.moreを最初の分岐の折りたたみ状態にします

if (data) {
            textfold();
            scope.more();
          }

この文は再帰文で、実際にはjQueryのanimateのテキストボックス展開アニメーションの実装に相当しますが、ここでは継続的に状態を判断するために再帰を利用しています。そして高さの値を変更します

そしてscope.isMoreを変更して変更します...もっと見る...または折りたたむ

ここではDOM操作を使用します

setTimeout(function() {
                scope.more();
              }, 1);

もう1文追加するのが最善です

document.getElementById('textfold').style.height = height + "px";

でDOMの変更を取得します

実際、一般的なアイデアは非常にシンプルで、他の場所も理解しやすいので、誰もが自分で試すことができます。

関連する推奨事項:

css2D 特殊効果の変換 -- テキスト折りたたみ効果_html/css_WEB-ITnose

JavaScript 互換の IE6 折りたたみおよび展開エフェクトの実装ケース

折りたたみに関するおすすめ記事

以上がAngular テキストの折りたたみおよび展開効果の簡単な実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。