javascript - 我是否需要单独的 View 来创建新数据和加载现有数据？

Question

我有一个表单，显示由 Angular 填充的约会信息。当我将现有约会加载到表单中时，一切都很好，但是当我尝试创建新约会时，我收到一堆空引用错误，并且没有用于 Angular 填充字段的现有数据。

例如，以下是我的观点之一的片段:

<fieldset class="form-inline extra-padding-right">
    <legend class="sr-only">Event Information</legend>
    <div class="form-group">
        <label>ID:</label>
        <p class="form-control-static">{{ eventId }}</p>
    </div>
    <div class="form-group">
        <label>Title:</label>
        <p class="form-control-static">{{ eventTitle }}</p>
    </div>
    <div class="form-group">
        <label>Event Status:</label>
        <select class="form-control" id="ddlEventStatus" ng-model="eventStatus"
                ng-options="es as es.EventStatusName for es in eventStatusList track by es.EventStatusId">
        </select>
    </div>
</fieldset>

eventId、eventTitle 和 eventStatus 附加到 Controller 中的 $scope 并且全部为 null，因为这将是一个新的约会。

我是否必须创建单独的 html View 来创建新约会并加载现有约会，或者是否有某种方法可以将条件放入我的 View 中，以便它仅在加载现有约会时尝试填充字段？

Answer 1

通常可以使用相同的 Controller 和 View 进行编辑/创建，并且只需在范围内切换标志变量:

类似于:

$scope.editMode = 'create';
$scope.startEdit = function(event){
   $scope.editMode = 'edit';
   $scope.event = event;
}
$scope.saveEdit = function(){

   $http.post(url,$scope.event).then(function(resp) {
       $scope.editMode = 'create';
       $scope.event = {}; // reset event object
   });
}

由于您应该始终在 ng-model 中使用对象，因此您的 View 应该使用更像这样的输出:

<span>{{ editMode == 'create' ? "New Event" : "Edit Event"}}</span>
{{ event.id }}
<input ng-model="event.id">