Question

我想询问发布问题，实际上我有一个下面的表格，在那个表格中，我使用ng-submit和ng-click功能但是它不起作用，有人可以帮助我吗？

<form method="post" class="sky-form" name="form">
    <div class="row">
        <div class="col col-12"><img src="public/images/icon_namapasien.png" alt=""/> Nama Pasien</div>
    </div>
    <div class="row">
        <div class="col col-10">
            <div ng-repeat="profile in profil">
                <label class="input disabled">
                    <input type="text" ng-model="profile.name">
                </label>
            </div>
        </div>
        <div class="col col-2">
            <a class="btnstatus">&nbsp;</a>
        </div>
    </div><!-- /row -->

    <div class="row">
        <div class="col col-12"><img src="public/images/icon_tgl.png" alt=""/> Tanggal Lahir</div>
    </div>
    <div class="row">
        <div class="col col-3">
            <label class="select">
                <div ng-repeat="profile in profil">
                    <select name="gender" ng-model="profile.birth_date">
                        <option ng-repeat="n in range(01,31)" value="{{n}}">{{n}}</option>
                    </select>
                    <i></i>
                </div>
            </label>
        </div>
        <div class="col col-4">
            <label class="select">
                <div ng-repeat="profile in profil">
                    <select name="gender" ng-model="profile.birth_month">
                        <option value="01">Januari</option>
                        <option value="02">Februari</option>
                        <option value="03">Maret</option>
                        <option value="04">April</option>
                        <option value="05">Mei</option>
                        <option value="06">Juni</option>
                        <option value="07">Juli</option>
                        <option value="08">Agustus</option>
                        <option value="09">September</option>
                        <option value="10">Oktober</option>
                        <option value="11">November</option>
                        <option value="12">Desember</option>
                    </select>
                    <i></i>
                </div>
            </label>
        </div>
        <div class="col col-3">
            <label class="select">
                <div ng-repeat="profile in profil">
                    <select name="gender" ng-model="profile.birth_year">
                        <option ng-repeat="n in range(1910,2016)" value="{{n}}">{{n}}</option>
                    </select>
                    <i></i>
                </div>
            </label>
        </div>
        <div class="col col-2">
            <a class="btnstatus">&nbsp;</a>
        </div>
    </div><!-- /row -->

    <div class="row">
        <div class="col col-12"><img src="public/images/icon_gender.png" alt=""/> Jenis Kelamin</div>
    </div>
    <div class="row">
        <div class="col col-10">
            <div class="select">
                <label class="select">
                  <div ng-repeat="profile in profil">
                        <select name="gender" ng-model="profile.gender">
                                <option value="1">Pria</option>
                                <option value="0">Wanita</option>
                        </select>
                            <i></i>
                    </div>
                </label>
            </div>
        </div>
        <div class="col col-2">
            <a class="btnstatus">&nbsp;</a>
        </div>
    </div><!-- /row -->

    <div class="row">
        <div class="col col-12"><img src="public/images/icon_alamat.png" alt=""/> Alamat</div>
    </div>
    <div class="row">
        <div class="col col-10">
            <div ng-repeat="profile in profil">
                <label class="input disabled">
                    <input type="text" ng-model="profile.address"/>
                    <input type="hidden" name="name" value="0" ng-model="kodekota">
                </label>
            </div>
        </div>
        <div class="col col-2">
            <a class="btnstatus">&nbsp;</a>
        </div>
    </div><!-- /row -->

    <div class="row">
        <div class="col col-12"><img src="public/images/icon_telp.png" alt=""/> Nomor Telepon / Hp</div>
    </div>
    <div class="row">
        <div class="col col-10">
            <div ng-repeat="profile in profil">
                <label class="input disabled">
                    <input type="text" value="" ng-model="profile.phone"/>
                </label>
            </div>
        </div>
        <div class="col col-2">
            <a class="btnstatus">&nbsp;</a>
        </div>
    </div><!-- /row -->
    <p>&nbsp;</p>
    <button class="btn-yellow" type="submit" name="submit" ng-click="postProfil()">Simpan Perubahan</button>
</form>

这是angularjs代码

$scope.getProfil = function(){
    $http.get('/getUrl').success(function(data){
      $scope.profil = data;
    })
  }

  $scope.getProfil();

  $scope.profile = {};

  $scope.postProfil = function(){
    $http.post('/postUrl').success(function(data){
        $scope.getProfil();
    }).error(function(data){
        console.log(data);
    })
  }

  $scope.range = function(min, max, step){
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) input.push(i);
    return input;
  };

有一件事是肯定的，我知道只使用链接的http.post是一个坏主意，但在我这样做之前，我已经使用alert javascript函数调试它，例如我想从profile.name获取数据所以我在postProfil函数中提醒它（profile.name），但它返回undefined。

这是应该在http.post

中输入的密钥

地址
电话
生
性别
名称

我想使用http数组结构，如

$http.post({
method: 'POST',
url: '/postUrl',
data: {
//data is here
}
})

编辑：

也许我会改变我的问题，您是否知道使用AngularJS更新apiUrl中先前数据的数据的代码？所以我的问题是getProfil和postProfil是相同的键和值（但我认为一些键是不同的。）

Answer 1

只需使用ng-model $scope.profile：

即可

  $scope.postProfil = function(){
    $http.post('/postUrl', $scope.profile).success(function(data){
        $scope.getProfil();
    }).error(function(data){
        console.log(data);
    })
  }

Answer 2

$http.post('api/create/something', yourData)

应该解决你的问题。

$ http.post接受（url，data？，options？）另一方面，$ http直接接受（选项）。您可以像

一样使用它

$http({
    url: 'api/create/something',
    data: yourData,
    method: 'POST'
}).then(....)

此代码与上面的代码相同。

关于不准确的数据绑定。可能是区分大小写问题，或来自您的rest api配置的序列化问题。有时PascalCased变量不会像现在这样绑定到camelCased变量。有些配置需要完成。

使用AngularJS Http Post将表单html中的数据发布到服务器

2 个答案: