从控制器中的 ng-repeat 获取带有索引的 ng-model

Question

我在谷歌上找不到这个问题的答案，所以我在这里发布我的问题：

我需要根据我从ng-model 指令中获得的输入值向 php 文件发送 http.post 请求，但它位于 ng-repeat 内。我必须使用$index，因为它来自一个对我的数据库中的每一行重复的表单。简单来说，它用于更新我的数据库，但只是我感兴趣的行

但我不断收到以下错误

TypeError: 无法读取未定义的属性“0”

因为我的 ng-model 似乎有另一个名字。你能解释一下如何在控制器中使用索引命名ng-model 值，以便它与视图匹配。提前致谢。

这是我的代码：

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

Answer 1

这里

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

我认为你需要访问admin.datas[$index].id、admin.datas[$index].nom等等，因为admin.datas是数组

关于你的ng-model

你应该约束

ng-model="data.id" 来自您的ng-repeat 而不是使用admin.datas[$index].id

代码更少，声明性更强，如果添加过滤器，您的代码将停止工作。

Answer 2

好的，感谢 Gonzalo 的回答和我自己的调查，我找到了答案，你需要在这里做的是改变 http.post() 的值，就像

'id' : admin.datas[$index].id, admin.datas[$index].nom等

并更改视图中的 ng-model，如下所示：

ng-model="admin.datas[$index].id"

希望这对将来的某人有所帮助。