我在将表单数据(完整的)绑定(bind)到我的 Controller 时遇到问题。下面是我的代码:
<form name="form_foto" novalidate>
<div class="form-group">
<label>URL de la foto: </label>
<!--
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
-->
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
</div>
<div class="form-group">
<label>Lugar: </label>
<input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
</div>
<div class="form-group">
<label>Año: </label>
<input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
</div>
<!--
<button class="btn btn-default">Guardar Foto</button>
-->
<button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
</form>
guardarFoto功能代码:
$scope.guardarFoto = function(){
alert($scope.mifoto); //comes out undefined
$scope.misFotos.push($scope.mifoto);
delete $scope.mifoto;
}
任何帮助将不胜感激。谢谢!
最佳答案
只需初始化$scope.mifoto = {}。
检查这个实例:
angular.module('app', [])
.controller('ctrl', ['$scope',
function($scope) {
$scope.misFotos = [];
$scope.mifoto = {};
$scope.guardarFoto = function() {
alert($scope.mifoto); //comes out undefined
$scope.misFotos.push($scope.mifoto);
delete $scope.mifoto;
}
}
])<!DOCTYPE html>
<html ng-app="app">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-controller="ctrl">
<form name="form_foto" novalidate>
<div class="form-group">
<label>URL de la foto:</label>
<!--
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg">
-->
<input type="text" required class="form-control" placeholder="http://ejemplo.com/foto.jpg" data-ng-model="mifoto.foto" name="foto">
</div>
<div class="form-group">
<label>Lugar:</label>
<input type="text" required class="form-control" placeholder="Lugar de ejemplo" data-ng-model="mifoto.lugar" name="lugar">
</div>
<div class="form-group">
<label>Año:</label>
<input type="text" required class="form-control" placeholder="2016" data-ng-model="mifoto.anio" name="anio">
</div>
<!--
<button class="btn btn-default">Guardar Foto</button>
-->
<button class="btn btn-default" data-ng-disabled="datosNoValidos()" data-ng-click="guardarFoto()">Guardar Foto</button>
</form>
</body>
</html>关于javascript - Angujar JS 表单问题中未定义范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38112135/