angularjs - CRUD 详细信息屏幕，有条件的新建或编辑

Question

我正在使用 Angular 处理 CRUD 详细信息屏幕，并希望重复使用单个模板。这是初始模板伪代码，编辑屏幕的粗略开始...

<h1>{{fixtureType.Label}}</h1>
<form>
    <span>Fixture Type Details</span>
      <label>Type</label>
      <input>{{fixtureType.Type}}</input>
      <label>Watts</label>
      <input>{{fixtureType.Watts}}</input>
      <label>Cost</label>
      <input>{{fixtureType.Cost}}</input>
</form>

假设我也想有条件地使用与新屏幕相同的模板，它看起来像这样

<h1>New Fixture Type</h1>
<form>
    <span>Fixture Type Details</span>
      <label>Type</label>
      <input/>
      <label>Watts</label>
      <input/>
      <label>Cost</label>
      <input/>
</form>

如果这是直接的 Javascript，像 bIsEdit = fixtureType != null 这样的简单条件就可以解决问题。从我目前所读到的内容来看，没有条件或方法可以将一大块 JS 放入 Angular View 中..，或者这是我到达自定义 指令 或 过滤器?

现在我可以有 2 个 View 并适本地处理路由，但更愿意有一个 View 以避免代码重复。

那么 Angular 的处理方式是什么？

Answer 1

我希望每个人都有单独的路线。要将编辑内容和新 HTML 放在一起，您可以使用 ng-switch基本上有两个模板，但考虑将它们都放在一个部分中，这样你就可以将它包含在两个不同的 View 中:

<span ng-switch on="mode">
  <span ng-switch-when="edit">
    <h1>{{fixtureType.Label}}</h1>
    <form>
      <span>Fixture Type Details</span>
        <label>Type</label>
        <input ng-model='fixtureType.Type' ...>
    ...
  </span>
  <span ng-switch-default>
    <h1>New Fixture Type</h1>
    <form>
         <span>Fixture Type Details</span>
         <label>Type</label>
         <input ng-model="fixtureType.Type" ...>
    ...
  </span>
</span>