2016-04-02 10 views
1

私は新しいプロジェクトでangularjsを使用しています。 たとえば、私は以下の操作を使用しています。AngularJs CRUD操作で不要なコードが削除される

1. Create 
2. View 
3. Edit 
4. List 

この4つの操作では、4つのhtmlページを使用しています。

LIST操作で必要なhtmlページが1つであることを理解しています。 これで、Add/View/Edit htmlページを1ページに減らそうとしました。

ここではHTMLとjsコードは添付していませんが、単純にコードを実行する方法についてはIdeaが必要です。

私は試しています: 1. 1ページのhtmlはすべてのレコード(リスト)を表示します。 2.追加/編集/表示 - すべての操作は単一のhtmlページでなければなりません。

誰もが最良の方法やデモを提案することができます。

+1

表示と編集は大きく異なります。両方に同じテンプレートを使用しないでください。編集と作成で同じテンプレートを使用することがあります。それを試してみてください。具体的な問題があるときは具体的な質問をしてください。 –

答えて

0

作成に同じhtmlを使用できます&編集。

ビューに同じhtmlを使用するには、追加パラメータとしてモードを使用してみてください。

モード:作成、編集、表示。

「表示」モードでは、HTML全体を無効にすることができます。

0

要件が変更されたときにフォームを2か所で更新しないように、作成と編集に同じテンプレートを使用します。

モジュールは、定義されたようにルートを持つことができます。私は UPSERTワードを含むものとして経路、HTMLビューおよびコントローラを命名好む

.state('home.contentFeeds', { 
      abstract: true, 
      url: '/content-feeds', 
      template: '<div ui-view></div>', 
      controller: function() { 
      } 
     }) 
     .state('home.contentFeeds.list', { 
      url: '/list?status&published', 
      templateUrl: 'app/administrator/content-feeds/list/list-content-feeds.html', 
      controller: 'ListContentFeedsController' 
     }) 
     .state('home.contentFeeds.upsert', { 
      url: '/upsert/:contentFeedId', 
      templateUrl: 'app/administrator/content-feeds/upsert/upsert-content-feed.html', 
      controller: 'UpsertContentFeedController' 
     }) 
     .state('home.contentFeeds.view', { 
      url: '/view/:contentFeedId', 
      templateUrl: 'app/administrator/content-feeds/view/view-content-feed.html', 
      controller: 'ViewContentFeedController' 
     }) 

から日付までとSERT単語に由来します)。

編集フォームが作成フォームよりフィールド数が少なく、その場合はng-showを使用してフィールドを非表示にすることができます。フィールドが無効になるようにフィールドをオプトアウトするには、ng-requiredも使用する必要があります。

ルートに渡されたIDの存在が新しい/編集フォームであるかどうかを確認できます。

ビューフォームは、HTML入力コントロールの大量のマークアップを必要とせずに情報を表示するため、別々に保持する必要があります。

関連する問題