Question

我有一个AngularJS前端用于我正在构建的新内部门户网站。使用value = {{data.Param}}我已成功通过Slim PHP获取并创建工作请求。现在我正在尝试创建一个PUT请求，但我遇到了一个问题。

这是我＆＃34;更新/ PUT＆＃34;的当前代码。页。

请求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模型，价值和占位符的困惑。目前我的所有数据都填写在表单中，但是当用户更新页面时，他们必须重新填写每个框，否则将推送空白数据。我知道占位符实际上并没有填写数据 - 但是我无法在同一输入字段上同时使用ng-model和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() .'}}'; 
    }
}

Answer 1

我想出了问题，结果发现了Value和ng-model冲突，我不得不修改我的表单以正确获取数据。

我删除了所有值命令，并用ng-model =＆＃34; data.keyvalue＆＃34;替换它们。我之前感到困惑，因为我认为在引用范围之外的事情时需要使用{{}}。

我还添加了表单验证以进行更新 - 下面的新代码

请求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>

填充ng-model - 值不起作用的AngularJS

请求edit.html

app.js

index.php

1 个答案:

请求edit.html