angular:使用动态下拉列表提交表单

时间:2017-08-16 19:17:55

标签: angularjs

我有一个小表格,在那个表格中我有一个下拉列表。列表项是动态生成的。

$http({
    url: 'alljobs.php',
    method: "GET",
    params: {
        uid: viewer_id
    }
}).success(function(data) {
    $scope.jobss = data.content;
});

以下是表单提交的代码。

 $scope.formprofile33 = function() {
     var allData33 = {
         'msg': $scope.msg,
         'emp_id': viewer_id,
         'job_id': job.job_id,
         'job_title': $scope.jobss.SelectedOption.job_title,
         //    'job':job,
         'user_id': user_id
     }

     $http({
         method: 'POST',
         url: 'send_msg.php',
         data: allData33,
         headers: {
             'Content-Type': 'application/x-www-form-urlencoded'
         }
     }).success(function(data) {
         if (!data.success) {
             $scope.message = data.errors.message;
         } else {
             $scope.message = '';
             alert('Your message has been sent.');
             $scope.message = '';
         }
     });
 };

这是表格。

<form name="formProfile33" method="post" id="formProfile33" role="form" ng-submit="formprofile33()">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="row">
                    <div class="col-xs-10">                                          
                        <div class="col-xs-12 s_ma">
                            <select id="job" name="job" class="search_color selectors form-control" ng-model="job" required="required" ng-options="item.job_title for item in jobss track by item.job_id"> 
                                <option value=""> Select Job *</option>       
                            </select>
                        </div>
                        <textarea name="msg" ng-model="msg" class="form-control textbox1" id="msg" placeholder="Write your message" required="required" rows="3"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <center>
            <button type="submit" class="btn btn-home" name="btn-save1" id="btn-save1" required="required"><i class="icon ion-email"></i> Send Message </button>
        </center>
    </div>
</form>

问题是我无法在表单提交期间传递下拉值和ID。

我收到以下错误。

TypeError:无法读取属性&#39; job_title&#39;未定义的

请告知我如何提交带有下拉ID和值的表单。

1 个答案:

答案 0 :(得分:0)

您的示例将作业项目设置为范围字段“job”=&gt; ng-model="job", 可以使用$scope.job访问完整的所选项目。

尝试$scope.job.job_title$scope.job.job_id

html中的打印输出随时都是好帮手:Full job item: {{job | json}}

https://plnkr.co/edit/VenFVchI0brGZNC2Q7Fn?p=preview