为同一个页面中的多个表单处理Angular ng-model
Handle Angular ng-model for multiple forms in same page
我是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的底部,你会发现如何在指令之间通信。
相关文章:
- 将布尔值存储在隐藏字段中以进行表单处理
- 表单处理后 PHP 重定向
- Dojo表单处理事件
- jQuery表单处理,如何在回调时重新分配函数
- 如何获取表单处理事件
- 节点.js中的表单处理
- JavaScript onSubmit 表单处理
- 我有三个地方供用户登录,在同一页面上,我如何在一个功能中让所有三个按钮工作和三个表单处理
- 从老式的发布后重定向到现代的 ajax 表单处理
- 应用程序脚本 htmlservice 表单处理示例 jquery
- 使用离子移动应用程序与 Django 进行表单处理的最佳方式
- Javascript getElementByID和表单处理
- 使用javascript进行表单处理
- 为什么不是't正在调用AngularJS表单处理程序方法
- 将元素ID传递到数组中以进行POST表单处理
- 从url中提取facebook令牌并进行表单处理
- jQuery HTML表单处理
- PHP表单处理
- 为什么JavaScript表单处理根本不是标准的?
- 如何使用asp.net网页表单处理AngularJs