填充ng-model - Value不工作AngularJS


Populate ng-model - Value not working AngularJS

我有一个AngularJS前端用于我正在构建的一个新的内部门户网站。使用价值={{数据。我已经成功地得到了我的get和创建请求工作通过Slim PHP。现在,然而,我试图创建一个PUT请求,我遇到了一个问题。

这是我的"Update/PUT"页面的当前代码。

request-edit.html

<div class="jumbotron text-center">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <div class="text-center">
                <h1>{{ header }}</h1>
                <br/>
                <h3>{{ request.Header }}</h3>
                <br/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Id:</label>
            <div class="col-sm-3">
                <input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
            </div>
            <label class="col-sm-3 control-label">Date:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" value="{{ request.Date_Submitted }}" disabled/>
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Change Initiator:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{request.Change_Initiator}}" ng-model="request.changeInitiator"/>
            </div>
            <label class="col-sm-3 control-label">Risk Level:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Risk_Level }}" ng-model="request.riskLevel" />
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">CI Details:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Change_Initiator_id }}" ng-model="request.changeInitiatorId" />
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Requestor:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Requestor }}" ng-model="request.requestor" />
            </div>
            <label class="col-sm-3 control-label">Systems Affected:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Systems_Affected }}" ng-model="request.systemsAffected" />
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Implemented By:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Implemented_By }}" ng-model="request.implementationBy" />
            </div>
            <label class="col-sm-3 control-label">Implementation Date:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Implementation_Date }}" ng-model="request.implementationDate" bs-datepicker/>
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Close Date:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" placeholder="{{ request.Close_Date }}" ng-model="request.closeDate" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Work to be Performed:</label>
            <div class="col-sm-3">
                <textarea name="request.description" ng-model="request.workToBePerformed" placeholder="{{ request.Work_to_be_performed }}" ></textarea>
            </div>
            <label class="col-sm-3 control-label">Backout Plan:</label>
            <div class="col-sm-3">
            <textarea name="request.description" ng-model="request.backoutPlan" placeholder="{{ request.Backout_Plan }}" ></textarea>
            </div>
        </div>
        <div class="form-group">
            <button class="update" ng:click="updateRequest()">Save Edits</button>    
            <button class="approve" ng:click="approveRequest()">Approve</button> 
        </div>

    </form>
    <div class="form-group">
            <a href="#/requests" class="btn btn-default pull-right">
                <span class="glyphicon glyphicon-arrow-left"></span> Back
            </a>
        </div>
</div>

我对ng-model, value和占位符的困惑。目前,我的所有数据都填充在表单中,但是当用户要更新页面时,他们必须重新填写每个框,否则将推送空白数据。我理解占位符实际上并没有填写数据-但是我一直无法在同一输入字段上同时使用ng-model和value。

我的前两个字段使用value填充很好,但我不希望人们编辑日期或ID。我的其他字段使用占位符在临时表单中显示正确的数据,但没有使用ng-model填充。此外,当我的用户去更新ng-model DOES函数。

所以简而言之,我目前的问题是ng-model不显示原始数据-但正确地推送它。这导致我的用户每次都必须重新输入所有数据,否则记录将以空值更新。

下面是我剩下的逻辑回顾。

app.js
var app = angular.module('changeControlApp', [
    'ngRoute',
    'ngResource'
]);
//This configures the routes and associates each route with a view and a controller
app.config(function($routeProvider, $locationProvider) {
    //$locationProvider.html5Mode(true); 
    $routeProvider
        .when('/',                      {templateUrl: 'app/partials/request-list.html', controller: 'viewController' })
        .when('/requests',              {templateUrl: 'app/partials/request-list.html', controller: 'viewController' })
        .when('/requests/create',       {templateUrl: 'app/partials/request-create.html', controller: 'createRequestController' })
        .when('/settings',              {templateUrl: 'app/partials/settings.html', controller: 'settingsController'})
        .when('/requests/:id',          {templateUrl: 'app/partials/request-view.html', controller: 'viewRequestController' })
        .when('/requests/edit/:id',     {templateUrl: 'app/partials/request-edit.html', controller: 'editRequestController' })
        .otherwise({ redirectTo: '/' });         
});
app.controller('editRequestController', function($scope, $location, $route, $routeParams, $resource) {
        $scope.header = 'Edit Change Request';
        // Update User details
        var request_Id = $routeParams.id;
        if (request_Id) {
            var Request = $resource(('http://pdgrosit02v/changeRequest/app/api/requests/'+ request_Id));
            $scope.request = Request.get();
        }
        $scope.updateRequest = function() {
            var RequestPut = $resource(('http://pdgrosit02v/changeRequest/app/api/requests/'+ request_Id), {}, { update: { method: 'PUT'}} );
            RequestPut.update($scope.request, function() {
                        // success
                        $location.path('/requests');                     
                    }, function() {
                        // error
                        console.log(error);
                    });
        }
});

和Slim文件

index.php

<?php
require 'Slim/Slim.php';
'Slim'Slim::registerAutoloader();
use Slim'Slim;
$app = new Slim();
//$paramValue = $app->request->params('paramName');
$app->get('/requests', 'getRequests');
$app->get('/requests/:id',  'getRequest');
$app->post('/requests/create', 'addRequest');
$app->put('/requests/:id', 'updateRequest');
$app->run();

function updateRequest($id) {
    $request = Slim::getInstance()->request()->getBody();
    $data = json_decode($request, true);
    $sql = "UPDATE change_request SET Change_Initiator=:changeInitiator, Change_Initiator_id=:changeInitiatorId, Risk_Level=:riskLevel, Requestor=:requestor, Work_to_be_performed=:workToBePerformed, Backout_Plan=:backoutPlan, Backout_Time=:backoutTime, Implementation_Date=:implementationDate, Header=:title, Systems_Affected=:systemsAffected, Implemented_By=:implementationBy WHERE ID=$id";
    //$sql = "UPDATE change_request SET Change_Initiator=:changeInitiator WHERE ID=$id";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);  
        $stmt->bindValue(":changeInitiator", $data['changeInitiator']);
        $stmt->bindParam(":changeInitiatorId", $data['changeInitiatorId']);
        $stmt->bindParam(":riskLevel", $data['riskLevel']);
        $stmt->bindParam(":requestor", $data['requestor']);
        $stmt->bindParam(":workToBePerformed", $data['workToBePerformed']);
        $stmt->bindParam(":backoutPlan", $data['backoutPlan']);
        $stmt->bindParam(":backoutTime", $data['backoutTime']);
        $stmt->bindParam(":implementationDate", $data['implementationDate']);
        $stmt->bindParam(":title", $data['title']);
        $stmt->bindParam(":systemsAffected", $data['systemsAffected']);
        $stmt->bindParam(":implementationBy", $data['implementationBy']); 
        $stmt->execute();
        $db = null;
        echo json_encode($data); 
    } catch(PDOException $e) {
        echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

我弄清楚了问题,结果是Value和ng-model冲突,我不得不修改我的表单以正确获取数据。

我删除了所有的值命令,并用ng-model="data.keyvalue"代替它们。我之前很困惑,因为我认为在引用范围外的东西时需要使用{{}}。

我还为更新添加了表单验证-

下面的新代码

request-edit.html

<div class="jumbotron text-center">
    <form class="form-horizontal" role="form" name="requestEditForm" ng-submit="updateRequest()">
        <div class="form-group">
            <div class="text-center">
                <h1>{{ header }}</h1>
                <br/>
                <h3>Title of request:</h3>
                <input name="title" id="title" class="form-control" type="text" ng-model="request.Header" />
                <br/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Id:</label>
            <div class="col-sm-3">
                <input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
            </div>
            <label class="col-sm-3 control-label">Date Submitted:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" value="{{ request.Date_Submitted }}" disabled/>
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Change Initiator:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Change_Initiator" name="changeInitiator" id="changeInitiator" />
                <span class="error" ng-show="requestEditForm.changeInitiator.$error.required && requestEditForm.changeInitiator.$dirty">Title is required</span>
            </div>
            <label class="col-sm-3 control-label">Risk Level:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Risk_Level" name="riskLevel" id="riskLevel" required/>
                <span class="error" ng-show="requestEditForm.riskLevel.$error.required && requestEditForm.riskLevel.$dirty">Risk Level is required</span>
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">CI Details:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Change_Initiator_id" />
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Requestor:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Requestor" />
            </div>
            <label class="col-sm-3 control-label">Systems Affected:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Systems_Affected" />
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Implemented By:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Implemented_By" />
            </div>
            <label class="col-sm-3 control-label">Implementation Date:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Implementation_Date" bs-datepicker/>
            </div>
        </div>
        <div class="form-group">    
            <label class="col-sm-3 control-label">Close Date:</label>
            <div class="col-sm-3">
                <input type="text" class="form-control" ng-model="request.Close_Date" />
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">Work to be Performed:</label>
            <div class="col-sm-3">
                <textarea name="request.description" ng-model="request.Work_to_be_performed"></textarea>
            </div>
            <label class="col-sm-3 control-label">Backout Plan:</label>
            <div class="col-sm-3">
            <textarea name="request.description" ng-model="request.Backout_Plan"></textarea>
            </div>
        </div>
        <div class="form-group">
            <button class="submit">Save Edits</button>    
            <button class="approve" ng:click="approveRequest()">Approve</button> 
        </div>

    </form>
    <div class="form-group">
            <a href="#/requests" class="btn btn-default pull-right">
                <span class="glyphicon glyphicon-arrow-left"></span> Back
            </a>
        </div>
</div>