Forum PHP.pl > Angular dynamiczne ng-messages

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Angular dynamiczne ng-messages

Forum PHP.pl > Forum > Po stronie przeglądarki

smiady

8.03.2016, 19:00:58

Witam. Mam problem z dynamicznie dodawanym ng-messages

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="pl">
	<head>
		<meta charset="utf8" />
		<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
		<title>dynamic</title>
	</head>
	<body>
		<div ng-app="app">
			<div ng-controller="AppCtrl" class="container">
				<div class="row">
					<div class="col-sm-6">
						<div class="panel panel-primary">
							<div class="panel-heading">
								<span class="glyphicon glyphicon-leaf"></span> Inputs
							</div>
							<div class="panel-body">
								<form id="myForm" class="form-horizontal" name="myForm">
									<div class="form-group" ng-repeat="(key, input) in inputs">
										<label for="myInput{{key}}" class="col-sm-4 control-label">Input {{key}}</label>
										<div class="col-sm-8">
											<input type="email" id="myInput{{key}}" class="form-control" 
												ng-model="input.name" name="myInput{{key}}" required />
											<div ng-messages="myForm.myInput{{key}}.$error">
												<div ng-message="required">This field is required.</div>
												<div ng-message="email">This email is required.</div>
											</div>
										</div>
									</div>
								</form>
							</div>
							<div class="panel-footer clearfix">
								<button type="button" class="btn btn-success pull-right" ng-click="addInput()">
									<span class="glyphicon glyphicon-plus"></span> Add input
								</button>
							</div>
						</div>
					</div>
					<div class="col-sm-6">
 
					</div>
				</div>
			</div>
		</div>
 
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="bootstrap.js"></script>
		<script type="text/javascript" src="angular.js"></script>
		<script type="text/javascript" src="angular-route.js"></script>
		<script type="text/javascript" src="angular-resource.js"></script>
		<script type="text/javascript" src="angular-messages.js"></script>
		<script type="text/javascript">
			angular.module('app', ['ngMessages']);
 
			angular.module('app').controller('AppCtrl', function($scope) {
				$scope.inputs = [{
					id: 1,
					name: 'example'
				}, {
					id: 2,
					name: 'test'
				}, {
					id: 3,
					name: 'custom'
				}];
 
				$scope.addInput = function() {
					$scope.inputs.push({
						id: 0, 
						name: ''
					});
				};
			});
		</script>
	</body>
</html>
[HTML] pobierz, plaintext

Problem występuje we fragmencie <div ng-messages="myForm.myInput{{key}}.$error"> w taki sposób nie można się odwołać do $error, choć obiekt myForm.myInput{{key}} istnieje, bo sprawdzałem w console.log.
Co powinno być w ng-messages ?

marcio

15.03.2016, 17:34:44

Raczej powinno byc:

[HTML] pobierz, plaintext 
<div ng-messages="myForm.myInput[key].$error">
[HTML] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.