javascript - 处理同一页面中多种表单的 Angular ng-model

Question

我是 AngularJS 的新手，遇到了一个问题或该怎么做。我正在创建一个足球比分仪表板，每周都需要更新。所以我在页面上加载了 9 个游戏，从数据库中检索信息。

这是我的 Controller :

DashQ.controller( 'homeController', [ '$scope', '$http', function($scope, $http){

        $scope.datos = {};

        $http.get("http://localhost:8000/jornadas")
             .success( function( result ) {
                       $scope.jornadas = result;
                    })
             .error( function( data, status ) {

                    });

        $scope.getPartidosJornada = function(id){

            $http.get("http://localhost:8000/jornada/" + id)
                 .success( function( result ) {
                            $scope.partidos = result;                
                        })
                 .error( function( data, status ) {

                        });

        }

        $scope.gooolL = function(){

            $http({
                    method  : 'POST',
                    url     : 'http://localhost:8000/goles/anotar',
                    data    : $.param($scope.datos),
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).
                success(function(response){
                    $scope.minutoGol = ''
                }).
                error(function(response){
                    alert('Datos incompletos');
                });
        }

    }] );

这是我的观点:

<div class="col-md-4" ng-repeat="partido in partidos">

              <div class="row">
               <div class="col-md-offset-2 col-md-4 text-center">
                   <div class="localBox">
                        <label class="circulo-res jornadaLabel">
                            <span class="circulo-ins {{partido.equipo_local.logotipo}}"></span>
                        </label>
                        <form>
                            <input type="hidden" value="{{ partido.id }}" ng-model="datos.partidoId">
                            <input type="hidden" value="{{ partido.equipo_local_id }}" ng-model="datos.equipoId">
                            <input type="text" class="form-control" ng-model="datos.minutoGolLocal" />
                        </form>
                        <button class="btn btn-primary" ng-click="gooolL()"><i class="fa fa-plus"></i></button>
                   </div>
               </div>

               <div class="col-md-4 text-center">
                   <div class="visitaBox">
                        <label class="circulo-res jornadaLabel">
                            <span class="circulo-ins {{partido.equipo_visita.logotipo}}"></span>
                        </label>
                        <form>
                            <input type="hidden" value="{{ partido.id }}" ng-model="datos.partidoId">
                            <input type="hidden" value="{{ partido.equipo_visita_id }}" ng-model="datos.equipoId">
                            <input type="text" class="form-control" ng-model="datos.minutoGolVisita" />
                        </form>
                        <button class="btn btn-primary" ng-click="gooolV()"><i class="fa fa-plus"></i></button>
                   </div>
               </div>
              </div>

            </div>

问题是，处理每场比赛的最佳方式是什么...因为 ng-model 会重复自身 9 次，因此输入值会分别针对主队和客队重复，并且当函数为执行后，隐藏的输入值不会传递到 Controller ，并且成功函数不会清除输入。

希望有人帮忙，谢谢...

Answer 1

我会将其包装在具有隔离范围的指令中:

<div class="localBox">
    <label class="circulo-res jornadaLabel">
        <span class="circulo-ins {{partido.equipo_local.logotipo}}"></span>
    </label>
    <form>
        <input type="hidden" value="{{ partido.id }}" ng-model="datos.partidoId" />
        <input type="hidden" value="{{ partido.equipo_local_id }}" ng-model="datos.equipoId" />
        <input type="text" class="form-control" ng-model="datos.minutoGolLocal" />
    </form>
    <button class="btn btn-primary" ng-click="gooolL()">
        <i class="fa fa-plus"></i>
    </button>
</div>

两个团队都使用它。

还将两个团队包装在另一个指令中，以便在 ng-repeat 中您将有 1-2 行可读行。

在 https://docs.angularjs.org/guide/directive 的底部您将了解如何在指令之间进行通信。