Angular将解析对象传递给Ng-Model

Angular Passing Resolved Objects To Ng-Model

本文关键字:Ng-Model 对象 Angular      更新时间:2023-09-26

我认为这应该是件容易的事,因为我以前做过,但显然第一次我很幸运,要么是Angular有一些我还没有完全理解的怪癖。

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

这很好,我的问题是在Angular中,当我想编辑这些订单时,通过一个模态窗口(它有自己的作用域)。基本上在模态中会弹出一个表单,要求用户编辑Javascript对象,当然没有用户想要编辑一个原始对象,所以它是一个带有ng-models的表单。我的问题是ng-model似乎没有选择我的对象引用。

我们开始(我有一个活塞在下面):

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

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;

因此,希望大家清楚,我所做的只是将order对象传递给modal。

现在对我来说,我所做的就是传递相同的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模型。这是在那里,我控制台记录它从模态的控制器,我可以看到它被设置,但模型是空白的。为什么会这样呢?为什么在console.log()显示对象是用$$hashkey传递的时候它还能工作?我不能再次从ng-repeat传递,因为我只有一个顺序,所以在第一个模板中没有什么可迭代的。

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

编辑:添加一个柱塞:https://plnkr.co/edit/x6FPiS6OtF2gdn4ZtFyJ?p=preview

乍一看,问题似乎出在你的resolve函数

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;
                    }}
            });
        }
      }); 
    }

order的resolve函数应该返回$scope.order尝试一下,让我知道这是否有效。我只是跟着直觉走

我通过改变变量名让它工作,我猜出于某种原因,它正在寻找旧的$scope.order,而不是一个解决了模态?

无论如何,这是一个工作的活塞…

https://plnkr.co/edit/AZpeFGaBktFjSr2SL2Rv?

相关文章: