Ручка Угловая ng-модель для нескольких форм на одной странице

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> 

Дело в том, что лучший способ справиться с каждой игрой ... потому что нг-модель повторяется 9 раз, поэтому входное значение повторяется в каждом другом, для дома и для команд вне очереди соответственно, также, когда функция выполняется, скрытые входные значения, не передаваемые контроллеру, и функция успеха не очищают вход.

Надежда кто-то помогает, спасибо ...

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 вы найдете способы связи между директивами.