将对象传递给角度js中的函数

时间:2017-02-09 06:09:22

标签: angularjs

这里我试图将用户输入的数据传递给角度函数,以便我可以将其发送到服务器。但是数据没有在功能上恢复。

var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope, $http) {
                  $scope.submitForm = function (data) {
                    console.log(data + " " + data.fname + " " + data.lname);
                    $http({
                        method: 'POST',
                        url: "update",
                        data: data,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    }).success(function (result) {
                                              console.log(result);
                    });
                }
            });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
                        <form  name="update">
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for=fname">First Name</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type=text"  class="form-control" id="fname" name="fname" placeholder="First Name"
                                           ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for="lname">Last Name</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type=text"  class="form-control" id="lname" name="lname" placeholder="Last Name"
                                           ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last  Name required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for="submit" class="sr-only" >submit</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type="submit"  class="form-control btn btn-success" id="update"
                                           ng-click="submitForm(user)"
                                           name="submit" placeholder="Submit"/>
                                </div>
                            </div>
                        </form>
                    </div>

1 个答案:

答案 0 :(得分:2)

而不是ng-bind使用ng-model

ng-bind="user.fname" ---&gt; ng-model="user.fname"

将此用于所有表单元素。