Handle Angular ng-model for multiple forms in same page

Question

I'm new to AngularJS and came across to a problem or how to do. I'm creating a dashboard for soccer scores which every week need to update. So I load 9 games por page, information retrieved from the Database.

Here's my 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');
                });
        }

    }] );

And here's my view:

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

The thing is, what's the best way to handle each game... because the ng-model repeats itself 9 times, so the input value repeats in every other, for home and for away teams respectively, also when the function is executed, the hidden input values not passing to the controller and the success function doesn't clear the input.

Hope somebody helps, thanks...

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.