Angular js. Добавление данных в модель из формы
В этом уроке мы продолжим разрабатывать наше приложение на js фреймворке angluar. Сегодня мы реализуем добавление данных из формы в модель.
Чтобы реализовать добавление информации в модель данных, нам нужно:
- добавить директиву ng-click к тому элементу, при клике на который данные с формы будут попадать в модель. В значение этой директивы указать название метода. В нашем случае это addPlayer()
- В контроллере определить у специального объекта $scope одноименным метод addPlayer(). Конечно же в этот метод нужно передавать параметры, а именно данные с формы. Поэтому определение и вызов метода будут выглядеть следующим образом addPlayer(playerName, playerTeam, playerCountry). Обратите внимание, что имена параметров совпадают со значениями директивы ng-model. Как вы помните, ее цель связать данные с объектом $scope.
Код урока
<!DOCTYPE html>
<html ng-app="playersApp">
<head>
<meta charset="utf-8">
<title></title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container" ng-controller="playerCtrl">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal">
<legend>Список футболистов</legend>
<div class="form-group">
<label for="playerName" class="col-sm-4 control-label">Имя игрока</label>
<div class="col-sm-8">
<input type="text" ng-model="playerName" class="form-control" id="playerName" placeholder="Имя игрока">
</div>
</div>
<div class="form-group">
<label for="playerTeam" class="col-sm-4 control-label">В какой команде играет</label>
<div class="col-sm-8">
<input type="text" ng-model="playerTeam" class="form-control" id="playerTeam" placeholder="В какой команде играет">
</div>
</div>
<div class="form-group">
<label for="playerCountry" class="col-sm-4 control-label">Гражданство</label>
<div class="col-sm-8">
<input type="text" ng-model="playerCountry" class="form-control" id="playerCountry" placeholder="Гражданство">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-sm-offset-4">
<button ng-click="addPlayer(playerName, playerTeam, playerCountry)" class="btn btn-default">Добавить</button>
</div>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th>Игрок</th>
<th>Команда</th>
<th>Национальность</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in players.playersObjects">
<td>{{player.name}}</td>
<td>{{player.team}}</td>
<td>{{player.country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="angular.js"></script>
<script>
var app = angular.module("playersApp", []);
var model = {
playersObjects: []
}
app.controller("playerCtrl", function($scope){
$scope.players = model;
$scope.addPlayer = function(playerName, playerTeam, playerCountry) {
$scope.players.playersObjects.push({name: playerName, team: playerTeam, country: playerCountry});
}
});
</script>
</body>
</html>
0 Комментариев