3

我正在使用 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 视图中……或者这是我需要自定义指令或过滤器的地方？

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

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

4

2 回答 2

3

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

<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={};
   })
于 2013-04-13T01:01:26.960 回答
3

我希望每个路线都有单独的路线。要将编辑和新 HTML 放在一起，您可以使用ng-switch与基本上两个模板，但考虑将它们都放在一个部分中，以便您可以 ng-include 它在两个不同的视图中：

<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>
于 2013-04-12T19:32:05.477 回答