angularjsでテーブルにtrを追加するメソッドを実装する方法

亚连
リリース: 2018-06-04 10:48:55
オリジナル
2224 人が閲覧しました

以下に、angularjs を使用してテーブルに tr を追加する方法に関する記事を紹介します。これは参考になるので、皆さんのお役に立てれば幸いです。

要件:

上記は

ログイン後にコピー

ループ表示を使用した表です。現在の要件の 1 つは、フィールドを各行に追加する必要があることですが、同じ行に表示することはできず、次の行に表示する必要があります。最初は直接追加することを考えましたが、行を変更する方法がありませんでした。以下に別のものを追加することはできません。信頼できるのは強力な angulaj とカスタム命令のみです。始めましょう。

1 カスタム指示

.directive(
   'kbnTableRow',
   function($compile) {
    return {
    restrict : 'A',
    link : function(scope, element) {
    element.after('');
   function expressDescHtml() {
   var detailHtml = ''
   + '

' + '

' + ' ' + '

' +'

' + ''; return detailHtml; } }, templateUrl : 'libs/kbnTable/table_row/rule.html' }; });
ログイン後にコピー

2 rules.html はオリジナルのコンテンツです


 

{{$index+1}}

   {{rule.rightVar.desc}}

ログイン後にコピー

変更する必要はありません、オリジナルとはここに書かれている内容です。

3 最初のページの tr ループ部分を新しいコマンドで書き換えます:

表达式设置

序号 左变量 操作符 右变量 分值 操作

ログイン後にコピー

この方法で初期要件を完了できますが、上記のわずかな変更でより良い機能を実現できます。次のようになります。自動的に縮小:

上記は私が皆さんのためにまとめたもので、将来皆さんのお役に立てば幸いです。

関連記事:

Vue で親子コンポーネントのデータ転送、変更、更新を実装する方法 (詳細なチュートリアル)

vue2.0 子コンポーネントで props 値の変更を実装し、それらを渡す方法親コンポーネントの値

vue で単一コンポーネントのデータを動的に変更するときにすべての再レンダリングを実装する方法

以上がangularjsでテーブルにtrを追加するメソッドを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!