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

Handle Angular ng-model for multiple forms in same page

本文关键字:表单 处理 Angular ng-model 同一个      更新时间:2023-09-26

我是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次,所以输入值每隔一次重复一次,主队和客场队分别重复一次,而且当函数执行时,隐藏的输入值没有传递给控制器,成功函数也没有清除输入。

我会把它封装在一个单独作用域的指令中:

<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的底部,你会发现如何在指令之间通信。