Как вставить элементы в массив контроллера, используя форму с полями ввода, и это будет отображаться в представлении

Question

Как вставить элементы в массив контроллера, используя форму с полями ввода, и это будет отображаться в представлении

0

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="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
    <script src="app.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/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 для отображения

http://plnkr.co/edit/5NXHQiOApzNU5cn0yQT2

Мой вопрос заключается в том, что вы можете видеть в файле plunker, что есть кнопка добавления в список. Что я хочу сделать, так это то, что я хочу добавить всплывающее окно, подобное тому, которое вы видите в разделе MODAL в приведенной ниже ссылке

https://angular-ui.github.io/bootstrap/

и добавьте некоторые текстовые поля к нему, давайте предположим, что форма и когда я нажимаю добавить в список в всплывающей форме, я хочу, чтобы она была добавлена в представление.

gandharv garg 07 июль 2015, в 14:41

Источник

Теги:

javascript

jquery

angularjs

1 ответ

Ещё вопросы

Fissio · Accepted Answer · 2015-07-07T11-21-00.000Z

Ну вот

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>

Большое вам спасибо, что сделали свое дело
Не стесняйтесь высказаться / выбрать это как правильный ответ, если это помогло вам :)