index.html
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="/style.css" />
<script data-require="[email protected]" src="/angular.js" data-semver="1.4.2"></script>
<script src="/app.js"></script>
<script src="/ui-bootstrap-tpls.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="module in validation.modules">Title:{{module.title}}
description:{{module.description}}</div>
<div>
<form name="myForm" novalidate class="simple-form">
Title: <input value="" type="text" placeholder="a" ng-model="itemAmount"><br />
description: <input value="" type="text" placeholder="Name of Item" ng-model="itemName">
<br />
<button ng-click="addItem()">Add to list</button>
</form>
</div>
</body>
</html>
APP.JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.validation = {
"modules":
[
{
"title":"name of validation1",
"description":"description of validation1"
},
{
"title":"name of validation2",
"description":"description of validation2"
}
]
};
$scope.addItem = function () {
$scope.validation.modules.push({
title: $scope.itemAmount,
description: $scope.itemName
});
};
});
Следующий файл - это pluknr, в котором я просто привязываюсь, используя ng-model для отображения
Мой вопрос заключается в том, что вы можете видеть в файле plunker, что есть кнопка добавления в список. Что я хочу сделать, так это то, что я хочу добавить всплывающее окно, подобное тому, которое вы видите в разделе MODAL в приведенной ниже ссылке
и добавьте некоторые текстовые поля к нему, давайте предположим, что форма и когда я нажимаю добавить в список в всплывающей форме, я хочу, чтобы она была добавлена в представление.
Ну вот
http://plnkr.co/edit/nI6PhjbAKEdTgXeWMKDx?p=preview
Открытие модального в основном контроллере и обработка результата из модального:
$scope.openModal = function() {
var modalInstance = $modal.open({
templateUrl : 'myModal.html',
controller: 'myModalController'
})
modalInstance.result.then(function(info) {
console.log(info);
$scope.validation.modules.push(info);
})
Связывание данных с модальным контроллером:
app.controller('myModalController', function($scope, $modalInstance) {
$scope.infoToAdd = {
title: "",
description: ""
}
$scope.addItem = function() {
$modalInstance.close($scope.infoToAdd);
}
$scope.cancel = function() {
$modalInstance.dismiss("cancel");
}
});
Шаблон:
<script type="text/ng-template" id="myModal.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
Title: <input type="text" placeholder="Title" ng-model="infoToAdd.title"><br />
description: <input type="text" placeholder="Description" ng-model="infoToAdd.description">
<br />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addItem()">Add to list</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>