javascript - 使用 AngularFire 简化 Angular Controller 发布到 Firebase

Question

我是 Angular 的新手，但很快就学会了。我有一个可以工作的 Controller ，基于我一起破解的演示代码，但是必须有一种更简单、更干净的方法来获取所有字段并发布，所以如果我想添加一个新字段，我不需要继续将其添加到各个字段中地点。

这是 Controller :

'use strict';
angular.module('goskirmishApp').controller('addEvent', function ($scope, fbutil, $timeout) {
// synchronize a read-only, synchronized array of messages, limit to most recent 10
$scope.messages = fbutil.syncArray('messages', {limit: 10});

// display any errors
$scope.messages.$loaded().catch(alert);

// provide a method for adding a message
$scope.addMessage = function(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink) {
  if( newEventName ) {
    // push a message to the end of the array
    $scope.messages.$add({
        eventName: newEventName,
        eventType: newEventType,
        startDate: newStartDate,
        startTime: newStartTime,
        endDate: newEndDate,
        endTime: newEndTime,
        eventDescription: newEventDescription,
        address: newAddress,
        postcode: newPostcode,
        ticketInformation: newTicketInformation,
        bookLink: newBookLink       
    })
    // display any errors
    .catch(alert);
  }
};

function alert(msg) {
    $scope.err = msg;
    $timeout(function() {
        $scope.err = null;
    }, 5000);
}
});

以及 View :

<h2>Add Event</h2>

<p class="alert alert-danger" ng-show="err">{{err}}</p>

<form role="form">
<div class="form-group">
    <label>Event Name</label>
    <input class="form-control" type="text" ng-model="newEventName">
</div>
<div class="form-group">
    <label>Event Type</label>
    <select class="form-control" ng-model="newEventType">
        <option value="" disabled selected>Game type</option>
        <option value="milsim">Skirmish</option>
        <option value="milsim">Special Event</option>
        <option value="milsim">Weekender</option>
        <option value="milsim">Milsim</option>
    </select>
</div>
<div class="form-group">
    <label>Start Date &amp; Time</label>
    <div class="row">
        <div class="col-sm-6">
            <input class="form-control" type="date" placeholder="Date" ng-model="newStartDate"/>
        </div>
        <div class="col-sm-6">
            <input class="form-control" type="time" placeholder="Time" ng-model="newStartTime"/>
        </div>
    </div>
</div>
<div class="form-group">
    <label>End Date &amp; Time</label>
    <div class="row">
        <div class="col-sm-6">
            <input class="form-control" type="date" placeholder="Date" ng-model="newEndDate"/>
        </div>
        <div class="col-sm-6">
            <input class="form-control" type="time" placeholder="Time" ng-model="newEndTime"/>
        </div>
    </div>
</div>
<div class="form-group">
    <label>Event Description</label>
    <textarea class="form-control" rows="4" ng-model="newEventDescription"></textarea>
</div>
<div class="form-group">
    <label>Address</label>
    <input class="form-control" ng-model="newAddress">
</div>
<div class="form-group">
    <label>Postcode</label>
    <input class="form-control" ng-model="newPostcode">
</div>
<div class="form-group">
    <label>Ticket Information</label>
    <textarea class="form-control" rows="4" ng-model="newTicketInformation"></textarea>
</div>
<div class="form-group">
    <label>Booking Link</label>
    <input class="form-control" ng-model="newBookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage(newEventName,newEventType,newStartDate,newStartTime,newEndDate,newEndTime,newEventDescription,newAddress,newPostcode,newTicketInformation,newBookLink,newLat,newLong,newApproved);newEventName = null;newEventType = null;newStartDate = null;newStartTime = null;newEndDate = null;newEndTime = null;newEventDescription = null;newAddress = null;newPostcode = null;newTicketInformation = null;newBookLink = null;">Add Event</button>
</form>

非常感谢您的帮助!

Answer 1

在一个对象中定义所有输入，您将直接将其发送到 firebase 例如在你的 Controller 中初始化:

$scope.form = {};

在模板中只需将输入定义为“表单属性”即可。

<h2>Add Event</h2>

<p class="alert alert-danger" ng-show="err">{{err}}</p>

<form role="form">
<div class="form-group">
    <label>Event Name</label>
    <input class="form-control" type="text" ng-model="form.eventName">
</div>
<div class="form-group">
    <label>Event Type</label>
    <select class="form-control" ng-model="form.eventType">
        <option value="" disabled selected>Game type</option>
        <option value="milsim">Skirmish</option>
        <option value="milsim">Special Event</option>
        <option value="milsim">Weekender</option>
        <option value="milsim">Milsim</option>
    </select>
</div>
<div class="form-group">
    <label>Start Date &amp; Time</label>
    <div class="row">
        <div class="col-sm-6">
            <input class="form-control" type="date" placeholder="Date" ng-model="form.startDate"/>
        </div>
        <div class="col-sm-6">
            <input class="form-control" type="time" placeholder="Time" ng-model="form.startTime"/>
        </div>
    </div>
</div>
<div class="form-group">
    <label>End Date &amp; Time</label>
    <div class="row">
        <div class="col-sm-6">
            <input class="form-control" type="date" placeholder="Date" ng-model="form.endDate"/>
        </div>
        <div class="col-sm-6">
            <input class="form-control" type="time" placeholder="Time" ng-model="form.endTime"/>
        </div>
    </div>
</div>
<div class="form-group">
    <label>Event Description</label>
    <textarea class="form-control" rows="4" ng-model="form.eventDescription"></textarea>
</div>
<div class="form-group">
    <label>Address</label>
    <input class="form-control" ng-model="form.address">
</div>
<div class="form-group">
    <label>Postcode</label>
    <input class="form-control" ng-model="form.postcode">
</div>
<div class="form-group">
    <label>Ticket Information</label>
    <textarea class="form-control" rows="4" ng-model="form.ticketInformation"></textarea>
</div>
<div class="form-group">
    <label>Booking Link</label>
    <input class="form-control" ng-model="form.bookLink">
</div>
<button type="submit" class="btn btn-danger" ng-click="addMessage()">Add Event</button>
</form>

并直接在您的 addMessage 函数中

$scope.addMessage = function() {
  if( $scope.form.eventName ) {
    // push a message to the end of the array
    $scope.messages.$add($scope.form)
    // display any errors
    .catch(alert);

    //Reset your form
    $scope.form = {};
  }
};