Question

我认为这应该是容易的，因为我之前已经做过，但显然我第一次幸运，无论是那个还是Angular都有些怪癖，我还没有把头包裹起来。

我尝试做的是能够编辑客户订单。所有客户订单都使用PHP从数据库作为JavaScript对象发送到客户端。

没关系，当我想通过模态窗口（具有自己的范围）编辑这些命令时，我的问题在Angular中。基本上，模式中弹出一个表单，要求用户编辑Javascript对象，当然，没有用户想要编辑原始对象，因此它是一个与该对象绑定的ng-model的表单。我的问题是ng-model似乎没有拿起我的对象引用。

所以我们走了（我下面有一个plunker）：

这是第一次在页面上获取客户订单的控制器（在用户启动模式以编辑订单之前）：

controller: function($scope,$http,$stateParams,$uibModal) {
         $http({
        method: 'GET',
        url: 'http://example.com/orderDATA',
        params: {id: $stateParams.id}
      }).then(function successCallback(html) {
        html.data[0].orderProperties =    JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it
        $scope.order =  html.data[0];
        $scope.edit = function (order) //function that launches modal window
        {
            var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'EditOrderInstance.html',
                controller: 'EditOrderCtrl',
                scope: $scope,
                size: "lg",
                resolve: {
                    order: function() {
                        return order;
                    }}
            });

        }
      }); 
    }

从以下模板中调用edit()函数：

<div class="container" style="margin-top:2%;">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy">Customer Name : @{{order.orderProperties.firstName + " " + order.orderProperties.lastName}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy">Pickup : @{{order.orderProperties.pickupDate + " in " + order.orderProperties.location}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy"><i class="fa fa-envelope" aria-hidden="true"></i> : @{{order.orderProperties.email}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<p class="whiteNoPointy"><i class="fa fa-phone" aria-hidden="true"></i> : @{{order.orderProperties.phone}}</p>
</div>
<div class="col-xs-12" style="text-align:center;">
<button type="button" style="border-radius:0;" class="btn btn-warning" ng-click="edit(order)">Edit This Order</button> <button type="button" style="border-radius:0;" class="btn btn-danger">Delete or Refund This Order</button> <button type="button" style="border-radius:0;" class="btn btn-primary">Complete This Order</button> 
</div>
</div>
</br></br>
<div class="shipping whiteNoPointy text-center" ng-repeat="specific in order.order">
<div class="col-xs-12" ng-if="specific.quantity.value>0"><p>@{{specific.quantity.value}} @{{specific.Name}}</p></div>
</div></div>

这部分工作正常。但是，当我执行点击编辑功能时，会将我们带入新的范围和新的控制器，特别是下面的控制器：

 app.controller('EditOrderCtrl', ['$scope', '$http', '$uibModal','$uibModalInstance', 'order', function($scope, $http, $uibModal, $uibModalInstance, order) {
        $scope.order = order;

正如希望清楚的那样，我所做的就是将订单对象传递给模态。

现在，对我来说，我所做的就是传递相同的订单对象，现在传递给这个新的控制器。但问题是，当我调查这个最新订单时，它没有$$hashkey。我说这是因为接下来的问题，正如我之前所说过的那样，除了在那个例子中我从ng-repeat中传递了order对象，最后一步有效。但是，当我这样做时，它不起作用。

我的意思是，当我尝试将模型模板中的模型与传递给模态控制器的订单对象对齐时，他们不会这样做。我只是得到空白的输入，这不是很好，因为编辑一个客户订单，你需要现在的订单是什么，否则它就像你重新开始。

以下是ng-model的模板。

<script type="text/ng-template" id="EditOrderInstance.html">
       <div class="modal-header" style="text-align:center;">
            <h3 class="modal-title">Edit Order</h3>
        </div>
        <div class="modal-body" style="text-align:center;">
        <form name="order" novalidate>
    <label for="firstName">First Name</label>
    <input type="text" name="firstName" class="form-control" ng-model="order.orderProperties.firstName"  ng-minlength="2" required>
    <p ng-show="orderorderProperties.firstName.$error.minlength" class="warning">Please put your full first name.</p>
  </div>
  <button ng-disabled="order.$invalid||totalPrice===0" ng-click="submitOrder()" class="btn btn-default">Submit</button>
</form>
        </div>
        <div class="modal-footer" style="text-align:center;">
            <button class="btn toggledz" type="button" ng-click="save()">Submit</button>
            <button class="btn" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

注意order.orderProperties.firstName ng-model。就在那里，我控制台从模态控制器登录它，我可以看到它已设置，但模型是空白的。那么为什么会这样呢？为什么在console.log（）显示对象与$$hashkey一起传递之前它是否有效？我无法再次从ng-repeat传递，因为我只有一个订单，因此在第一个模板中没有任何内容可以迭代。

请协助。我需要能够使用ng-model编辑订单，以便管理员可以编辑订单并将新的订单对象发送回我的服务器。

修改：添加了一个动词：https://plnkr.co/edit/x6FPiS6OtF2gdn4ZtFyJ?p=preview

Answer 1

从第一眼看，问题似乎与您的解析功能

有关

＆＃13;

controller: function($scope,$http,$stateParams,$uibModal) {
         $http({
        method: 'GET',
        url: 'http://example.com/orderDATA',
        params: {id: $stateParams.id}
      }).then(function successCallback(html) {
        html.data[0].orderProperties =    JSON.parse(html.data[0].orderProperties); //format data from server so that JavaScript can play with it
        $scope.order =  html.data[0];
        $scope.edit = function (order) //function that launches modal window
        {
            var modalInstance = $uibModal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'EditOrderInstance.html',
                controller: 'EditOrderCtrl',
                scope: $scope,
                size: "lg",
                resolve: {
                    order: function() {
                        return $scope.order;
                    }}
            });

        }
      }); 
    }

＆＃13;

您的订单解析函数应返回$ scope.order 尝试一下，让我知道这是否有效。我只是凭直觉

Answer 2

我通过更改变量名称来实现它，我想由于某种原因它会查找旧的$scope.order而不是解析为模态的那个？

无论如何，这是一个工作的掠夺者......

<强> https://plnkr.co/edit/AZpeFGaBktFjSr2SL2Rv?p=preview

角度传递已解析的对象到Ng模型

2 个答案: