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>

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

<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视图中......或者这是我到达自定义指令或过滤器的地方

现在我可以有2个视图并适当地处理路由，但是希望只有一个视图以避免代码重复。

那么处理这样的事情的Angular方法是什么？

Answer 1

我更喜欢各自的路线。要将编辑和新HTML保持在一起，您可以使用基本上两个模板的ng-switch，但考虑将它们放在一个部分模板中，这样您就可以将它包含在两个不同的视图中：

<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>

Answer 2

当新版本和可编辑版本之间的差异不太复杂时，我使用以下方法来最小化表单重复：

<form ng-submit="mySubmitMethod()">
<!-- fields models bound to "activeItem"-->
  <button >
     <span ng-show="editMode>Update</span>
      <span ng-show="!editMode">Create</span>
   </button>
</form>

    $scope.activeItem={};
    $scope.editMode=false;
    $scope.mySubmitMethod=function(){
        if($scope.editMode){
            /* do update of existing*/
        }else{
           /* process new form*/
       }
        $scope.resetform()
    });

   $scope.EditUser=function(user){
        $scope.editMode=true;
        $scope.activeItem=angular.copy( user);
   })

  $scope.newUser=function(){
        $scope.editMode=false;
        $scope.activeItem={};
   })

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

2 个答案: