Question

我正在Angular中创建一个新表单，所以在NewRequestController中，我正在设置一个$ scope对象，其中包含表单字段的默认值和表单字段的空白。

这是新的控制器：

var NewRequestController = function($scope){
    $scope.web = [];

    $scope.web['Title'] = "";
    $scope.web['Site'] = "";
    $scope.web['Priority'] = "";
    $scope.web['Division'] = $scope.current_user.Division;
    $scope.web['Requestor'] = $scope.loggedInUser.Title;
    $scope.web['CreationDate'] = new Date();
    $scope.web['CustomerDueDate'] = "";
    $scope.web['Page'] = "";
    $scope.web['Instructions'] = "";

这是我的表格：

<form name="newWebForm" role="form">
    <div class="row">
        <div class="form-group col-lg-12">
        <label for="description">
            Description: <span class="required">*</span>
        </label>
        <input type="text" class="form-control" name="title" placeholder="Description" ng-model="web.Title">
        </div>
    </div> <!-- Description -->

    <div class="row">
        <div class="form-group col-lg-6">
            <label for="site">Site Affected:</label>
            <select name="site" class="form-control" ng-options="w.ID as w.Title for w in websites" ng-model="web.Site">
            <option>Please Select ...</option>
            </select>
        </div>
        <div class="form-group col-lg-6">
            <label for="priority">Priority: <span class="required">*</span></label>
            <select name="priority" class="form-control" ng-options="p.ID as p.Title for p in Priorities" ng-model="web.Site">
            <option>Please Select ...</option>
            </select>
            </div>
    </div> <!-- Site / Priority -->

    <div class="row">
        <div class="form-group col-lg-6">
        <label for="dueDate">Division:</label>
        <input type="text" class="form-control" disabled="disabled" name="Division" ng-model="{{web.Division}}">
        </div>
        <div class="form-group col-lg-6">
        <label>Requestor:</label>
        <input type="text" class="form-control" disabled="disabled" name="requestor" value="{{web.Requestor}}">
         </div>
    </div> <!-- Division / Requestor -->

    <div class="row">
        <div class="form-group col-lg-6">
            <label for="create_date">Creation Date:</label>
            <input type="text" id="create_date" class="form-control datepicker" disabled="disabled" ng-model="{{}}">
        </div>
        <div class="form-group col-lg-6">
            <label for="dueDate">Due Date: <span class="required">*</span></label>
            <input type="text" class="form-control datepicker" placeholder="Click to choose a date" ng-model="{{due_date | date : 'MMM dd, yyyy'}}">
        </div>
    </div> <!-- CreationDate / DueDate -->

    <div class="row" ng-show="due_date < forward14Days">
        <div class="form-group col-lg-12">
            <label for="reason_rushed">Reason for Rushed Service: <span class="required">*</span></label>
            <textarea name="reason_rushed" class="form-control" rows="5"></textarea>
        </div>
    </div> <!-- Reason Rushed -->

    <div class="row">
<div class="form-group col-lg-12">
        <label for="pages">Page / Site URL (if applicable):</label>
            <textarea name="pages" class="form-control" rows="5"></textarea>
        </div>
    </div> <!-- Page / Site -->

    <div class="row">
        <div class="form-group col-lg-12">
        <label for="event_notes">Instructions: <span class="required">*</span></label>
        <textarea name="instructions" class="form-control" rows="5">{{web.Instructions}}</textarea>
        </div>
    </div> <!-- Instructions -->

    <div class="row" style="margin-top:30px;">
        <div class="form-actions col-lg-12">
        <button type="submit" class="btn btn-primary" ng-click=createNewWeb($event)>SUBMIT</button>
        </div>
    </div> <!-- Submit -->    
</form>

我在浏览器中对其进行了测试，并且遇到了13个错误，例如Token web.Division is unexpected和Unable to set property 'Title' of undefined or null reference无法设置属性标题对我来说特别困惑，因为当然，它是null ...表单没有＆＃39已经填好了。

我做错了吗？或角形是否太难使用？如果是这样，如果应用程序的其余部分是Angular，那么替代方案是什么。

提前致谢！

Answer 1

我发现你的设置有些问题。它主要涉及您使用ng-model。您绝不应将{{ }}与ng-model一起使用。 <删除> ng-model="{{web.Division}}" 。相反，ng-model="web.Division"。这将为您提供您期望的约束力。您有几种情况导致{{}}误导了ngModel。

另外，请勿在{{1}}内使用过滤器。像这样的过滤器：ng-model需要在您的控制器内或以不同的方式处理。您可以在javascript中使用Angular过滤器应用相同的日期格式（与在HTML中进行相比，请参阅docs以了解如何执行此操作）

作为一般经验法则，请勿在以ng-model="{{due_date | date : 'MMM dd, yyyy'}}"开头的任何指令中使用{{ }}。这些是Angular指令，通常已经知道ng。

我在测试代码时遇到的另一个错误是：

的分配

$scope

我假设您已在应用中的其他位置定义了这些内容。我创建了一个plunker here，出于我的目的，我只是将$scope.web['Division'] = $scope.current_user.Division; $scope.web['Requestor'] = $scope.loggedInUser.Title;和.Division设置为空字符串。

AngularJS：在Angular中创建一个新表单

1 个答案: