Question

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

这是我的控制人员：

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次，所以输入值分别在家庭和客场球队中重复出现，当执行该功能时，未传递给控制器的隐藏输入值和成功功能不会清除输入。

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

Answer 1

I would wrap this in a directive with isolated scope:

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

Use it for both teams.

Also wrap both teams in another directive so inside your ng-repeat you'll have 1-2 readable rows.

At the bottom of https://docs.angularjs.org/guide/directive you'll find how to communicate between directives.

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

1 个答案: