在 AngularJS 中创建预览表单

Question

我需要为表单中动态创建的字段创建预览。 如果我单击预览按钮，表单中显示的字段应显示在 使用AngularJS。有没有可能做到这一点？

我需要在单击预览按钮时显示我标记为红色的表单。我正在使用代码动态创建字段，因此我需要显示表单的预览以了解它在表单页面上的显示方式。

例如，我的表单名称是<form ng_model='demo'></form>。

我想在预览中查看演示表单。

Answer 1

AngularJS 实时预览：

angular.module('livePreview', []).
  filter('lebowski', function() {
    return function(gender) {
      return gender == 'male'? 'dude':
        gender == 'female'? 'dudette': '';
    }
  });

.ng-invalid {
   border-color: red;
   outline-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div class="row-fluid" ng-app="livePreview">
  <div class="span6">
    <form class="well" novalidate>
      <fieldset>
        <legend>Form</legend>
        <label>Name</label>
        <input type="text" ng-model="name" required />
        <label>Email</label>
        <input type="email" ng-model="email" required />
        <label>Age</label>
        <input type="number" ng-model="age" min="0" max="200"/>
        <label class="checkbox">
          <input type="checkbox" ng-model="shouldShowAge"/> Show Age?
        </label>
        <label>Sex</label>
        <label class="radio">
        <input type="radio" ng-model="gender" value="female" name="gender" />Female</label>
        <label class="radio">
          <input type="radio" ng-model="gender" value="male" name="gender" />Male</label>
      </fieldset>
    </form>
  </div>
  <div class="span6">
    <h2>Sweet Preview</h2>
    <p>OMG, I met this awesome <span ng-show="shouldShowAge && age">a {{age}} year old </span>{{gender|lebowski}} named <a href="{{email}}">{{name}}</a>!</p></div>
</div>