Search code examples
angularjsindexingangularjs-ng-repeatangular-ngmodel

Get ng-model with index from ng-repeat in controller


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'];
})();

Solution

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