Question

我正在使用＆＃39; getPickupSchedules＆＃39;指令根据用户邮政编码填充计划。在用户输入5位数的邮政编码后，我执行$http.get检索其zip的日程安排并构建一个select元素。当我检查元素时，每个元素的值都是它们的主键，但是当提交表单时，pickup_schedule的值将作为具有所有其他值而不是pickup_id的对象返回这导致我在服务器端出错。我知道我可以解析它以获得正确的数据，但有些东西告诉我，我不应该这样做，而且我可能错过了或做错了什么。

app.directive('getPickupSchedules', function($http){                  

    return {                                                                     
        restrict: 'A',                                                           
        replace: true,                                                           
        templateUrl: STATIC_URL + 'templates/directives/get_pickup_schedules.html',                     

        link: function(scope, elem, attrs) {                                                                                     

            scope.$watch('formData.zip', function() {                            
                zip = scope.formData.zip                                         

                if  (typeof zip !== 'undefined' && zip.length == 5)              
                {                                                                

                    $http.get('/get_schedules/' + zip)         
                        .then(function (results){                                
                            var pu = results.data                                
                            scope.pickupSchedules = results.data                 
                            console.log(scope.pickupSchedules);                  
                            scope.formData.pickupSchedules = scope.pickupSchedules[0]

                    });                                                          
                }                                                                
            });                                                                  

        }                                                                        
    }

get_pickup_schedules.html

<div>                                                                            
    <select                                                                      
            data-ng-options="(pickup.route + ' - ' + pickup.date) for pickup in pickupSchedules track by pickup.pickup_id"
            ng-model="formData.pickup_schedule">                                 
            <option value="">Select a pickup schedule</option>                   
    </select>                                                                    
</div>

对元素的检查：

<select data-ng-options="(pickup.route + ' - ' + pickup.date) for pickup in pickupSchedules track by pickup.pickup_id" ng-model="formData.pickup_schedule" class="ng-valid ng-dirty">
 <option value="" class="">Select a pickup schedule</option>
 <option value="8297">Route 1 - 2014-06-18</option>
 <option value="8298">Route 2 - 2014-06-25</option>
 <option value="9543">Route 3 - 2014-07-02</option>
 <option value="9544">Route 4 - 2014-07-09</option>
 </select>

我已将所有表单数据绑定到formData变量中。以下是console.log的{{1}}，它返回一个对象，而不是选项值中给出的主键。

formData.pickup_schedule

Answer 1

我很难跟着你说的话......但我觉得你要做的就是：

<select data-ng-options="pickup.pickup_id as (pickup.route + ' - ' + pickup.date) for pickup in pickupSchedules" ng-model="formData.pickup_schedule">

ngOptions提交对象而不是选项值

1 个答案: