Php 填充ng模型-值不起作用AngularJS

Php 填充ng模型-值不起作用AngularJS,php,html,angularjs,slim,Php,Html,Angularjs,Slim,我有一个AngularJS前端,用于我正在构建的一个新的内部门户网站。使用value={{data.Param}}我已经成功地通过slimphp获得了get和create请求。然而,现在我试图创建一个PUT请求,我遇到了一个问题 这是我的“更新/放置”页面的当前代码 request-edit.html 还有细长的锉刀 index.php 我解决了这个问题,结果发现值和ng模型冲突,我不得不修改表单以正确获取数据 我删除了所有value命令,并将它们替换为ng model=“data.keyval

我有一个AngularJS前端,用于我正在构建的一个新的内部门户网站。使用value={{data.Param}}我已经成功地通过slimphp获得了get和create请求。然而,现在我试图创建一个PUT请求,我遇到了一个问题

这是我的“更新/放置”页面的当前代码

request-edit.html 还有细长的锉刀

index.php
我解决了这个问题,结果发现值和ng模型冲突,我不得不修改表单以正确获取数据

我删除了所有value命令,并将它们替换为ng model=“data.keyvalue”。我以前很困惑,因为我认为在引用范围外的内容时需要使用{{}

我还在下面添加了用于更新的表单验证-新代码

request-edit.html

{{header}}

请求的标题:
身份证件: 提交日期: 变更发起人: 标题是必需的 风险等级: 风险等级是必需的 CI详细信息: 请求者: 受影响的系统: 执行人: 实施日期: 截止日期: 待执行的工作: 退出计划: 保存编辑 批准
<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>
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);
                    });
        }

});
<?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() .'}}'; 
    }
}
<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>