angularjsのテーブルにtrを追加する方法

この記事では、angularjs でテーブルに tr を追加する方法を主に説明します。参考になると思います。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

要件:

上記は

<tr>
<p>ループ表示を使用した表です。現在の要件の 1 つは、フィールドを各行に追加する必要があることですが、同じ行に表示することはできず、次の行に表示する必要があります。最初は直接追加することを考えましたが、行を変更する方法がありませんでした。以下に別のものを追加することはできません。信頼できるのは強力な angulaj とカスタム命令のみです。始めましょう。 </p>
<p>1 カスタム指示</p>
<pre class="brush:php;toolbar:false">.directive(
   'kbnTableRow',
   function($compile) {
    return {
    restrict : 'A',
    link : function(scope, element) {
    element.after('<tr>');
   function expressDescHtml() {
   var detailHtml = '<td></td>
<td>'
   + '<p>'
    + '</p>
<p>'
 + ' <input>'
+ '</p>'
+'' + '</td>';
return detailHtml;
    }
  },
 templateUrl : 'libs/kbnTable/table_row/rule.html'
      };
     });<p>2 rules.html はオリジナルの内容です</p>
<pre class="brush:php;toolbar:false"><td>
 <p>{{$index+1}}</p>
</td>
<td>
 <p>&nbsp&nbsp&nbsp{{rule.rightVar.desc}}</p>
 <p>
  </p>
<p>
   <input>
  </p>
  <p>
   <button>设置</button>
  </p>
 
</td>
<td>
 <p>
  <input>
 </p>
</td>
<td>
 <button>删除</button> <input>
</td>
<td>
 <button>
  <span>启用</span> <span>禁用</span>
 </button>
</td>

変更する必要はなく、オリジナルのものを書くだけです。

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

<p>
   </p><p>
    </p><h4>
     <b>表达式设置</b>
    </h4>
   
   <p>
    </p><p>
     </p><p>
      </p>

                                                                                                                       

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

           

      新增      

        

これで初期要件は完了しますが、より良い機能を実現するために少し変更することができます。次の行は自動的に縮小されます。

関連する推奨事項:

テーブルは、ダブルクリックで行の編集、追加、削除を実現します

Tableの特定の列の値を取得するjQueryの詳細な説明

テーブルソート関数を実装するjQueryの例共有

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