CRUD 세부 화면, 조건부 신규 또는 편집

Question

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> 

이 바로 자바 스크립트를한다면, bIsEdit = fixtureType != null 같은 간단한 조건이 트릭을 할 것입니다. 내가 지금까지 읽은 것부터 JS의 덩어리를 각도보기로 떨어 뜨리는 조건부 또는 방법은 없습니다. 또는 지정 또는 필터에 도달하는 곳은 어디입니까?

이제 뷰가 ​​2 개 있고 적절하게 라우팅 할 수 있지만 코드 중복을 피하기 위해 단일보기를 선호합니다.

그래서 이런 식으로 처리하는 각도 방법은 무엇입니까?

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={}; 
    })