Posting data in form html to server using AngularJS Http Post

Question

I would like to ask about posting problem, actually I have a form below, in that form, I have using ng-submit and ng-click for the function but it didn't work, can anyone help me?

<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>

Here is the angularjs code

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

one thing for sure, I know that http.post using only link is a bad idea, but before I do that, I have debug it using alert javascript function, for example I want to get the data from profile.name so I alert it (profile.name) inside the postProfil function but it returns undefined.

here is the key that should be inputed in the http.post

1. address
2. phone
3. birth
4. gender
5. name

I would like to use the http array structure such as

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

what do you guys think? Thanks

EDIT:

Maybe I will change my questions, do you know the code for updating data from previous data in an apiUrl using AngularJS? So my problem is that getProfil and postProfil is in the same key and value (but I think some of the keys are different).

Answer 1

Just use the 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)

should do the trick for your problem.

$http.post accepts (url, data?, options?) $http on the other hand accepts (options) directly. You can use it like

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

This code works the same with the code above.

Regarding the inaccurate data binding. It might be case sensitivity issues, or serialization issues coming from your rest api configuration. Sometimes PascalCased variable does not bind to camelCased variables as it is. Some configurations are needed to be done.