如何使用带有输入字段的表单将项目推送到控制器数组中，该表单将显示在视图中

How to push items into the controller array using a form with input fields and that will show up in the view

本文关键字：表单 数组 控制器 视图 显示 何使用 输入 字段 项目      更新时间：2023-09-26

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="angular.js@1.4.x" 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模型绑定以显示

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

我的问题是，你可以在plunker文件中看到有一个添加到列表按钮。。我想做的是，我想添加一个弹出标签，就像你可以在下面的链接的MODAL部分看到的那样

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

并在其中添加一些文本字段，让我们假设一个窗体，当我在弹出窗体中单击"添加到列表"时，我希望它被添加到视图中。。

开始

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>
相关文章：