I can't find the answer to this over google so i post my question here :
I need to send an http.post request to a php file based on inputs value that I get from a ng-model
directive in my view but its located inside a ng-repeat
. I must use $index
because its from a form that repeat for each line in my database.In simple word it's for update my data base but just the line i'm interested in
But I keep getting the following error
TypeError: Cannot read property '0' of undefined
because my ng-model seems to have another name. Can you explain me how to name a ng-model
value in controller with the index so it match the one one the view. Thank's in advance.
Here my code :
<ul>
<li class="err" ng-repeat="error in admin.errors"> {{error}} </li>
</ul>
<ul>
<li class="info" ng-repeat="msg in admin.msgs"> {{msg}} </li>
</ul>
<form class="form-inline" ng-repeat="data in admin.datas track by $index" novalidate ng-submit="admin.modify($index)">
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.id" ng-model="admin.id[$index]" id="id">
</div>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.nom" ng-model="admin.nom[$index]" id="nom">
</div>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" ng-value="data.prenom" ng-model="admin.prenom[$index]" id="prenom">
</div>
</div>
<div class="form-group">
<select class="form-control" id="structure" ng-value="data.structure" ng-model="admin.structure[$index]">
<option value="1">Structure 1</option>
<option value="2">Structure 2</option>
<option value="3">Structure 3</option>
<option value="4">Structure 4</option>
<option value="5">Structure 5</option>
</select>
</div>
<div class="form-group">
<div class="col-10">
<input class="form-control" type="text" id="fonction" ng-value="data.fonction" ng-model="admin.fonction[$index]">
</div>
</div>
<div class="form-group">
<textarea class="form-control" id="message" rows="1" ng-value="data.message" ng-model="admin.message[$index]"></textarea>
</div>
<button type="submit" class="btn btn-primary">Modifier</button>
</form>
my controller :
(function() {
'use strict';
angular
.module('AA')
.controller('adminCtrl', adminCtrl);
function adminCtrl($http){
const admin = this;
/* Parti recup*/
admin.datas = [];
admin.getMsg = function(){
$http.get('/dylan/ActeurAvenir/libs/read.php').then(function(response) {
admin.datas = response.data;
})
}
admin.getMsg();
/* Parti post*/
admin.msgs = [];
admin.errors = [];
admin.modify = function($index){
$http.post('/dylan/ActeurAvenir/libs/modify.php', {
'id' : admin.id[$index],
'nom' : admin.nom[$index],
'prenom' : admin.prenom[$index],
'structure' : admin.structure[$index],
'fonction' : admin.fonction[$index],
'message' : admin.message[$index]
}
).then(function(result) {
if (result.data.msg != '')
{
admin.msgs.push(result.data.msg);
}
else
{
admin.errors.push(result.data.error);
}
})
}
};
adminCtrl.$inject = ['$http'];
})();
Here
$http.post('/dylan/ActeurAvenir/libs/modify.php', {
'id' : admin.id[$index],
'nom' : admin.nom[$index],
'prenom' : admin.prenom[$index],
'structure' : admin.structure[$index],
'fonction' : admin.fonction[$index],
'message' : admin.message[$index]
}
I think you need to access admin.datas[$index].id
, admin.datas[$index].nom
and so on, since admin.datas
is the array
about your ng-model
you should be binding against
ng-model="data.id"
which comes from your ng-repeat
rather than using admin.datas[$index].id
It is less code, its more declarative, and if you add a filter your code will stop working.