Question

我有一个包含以下字段的HTML表单： Note Type （作为组合框）， Note Author :(作为文本框）和注意说明（作为textarea）。此HTML表单在变量中的 AngularJS 服务中编写，然后显示。

单击保存注释按钮，我需要将此信息发送到存储在另一个 JavaScript 文件中的JSON数组，该文件反过来显示在表格作为笔记列表。

在添加两个注释之后，JSON数组必须采用以下形式：

var noteData = [
{
    "NoteType": "Type1",
    "NoteAuthor": "John Doe",
    "NoteDescription": "My first note."
 },
 {
    "NoteType": "Type2",
    "NoteAuthor": "Peter Doe",
    "NoteDescription": "My second note."
 } ];

我该怎么做？

AngularJS 服务中的HTML表单如下所示：

var addNoteSection = '<label>Note Type: </label><br />' + 
'<select ng-model="myModel.NoteType"><option value="Type 1">Type 1</option><option value="Type 2">Type 2</option>' +
'<label>Note Author: </label><br /><input type="text" ng-model="myModel.NoteCreator" /><br />' +
'<label>Note Description: </label><br /><textarea ng-model="myModel.NoteDescription" rows="4" cols="50"></textarea><br />' +
'<button ng-click="saveNewNote()">Save Note</button>'

Answer 1

试试这个。

＆＃13;

var app = angular.module("app",[]);

app.controller("MyCtrl" , function($scope){
  
  $scope.noteData=[];
  $scope.myModel = {
       "NoteType": "",
       "NoteCreator":"",
       "NoteDescription":""
    };
  $scope.saveNewNote = function(model){
    var item = {
       "NoteType": model.NoteType,
       "NoteCreator": model.NoteCreator,
       "NoteDescription": model.NoteDescription
     };
    
     $scope.noteData.push(item);
     console.log($scope.noteData);
    };
  
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <div ng-app="app" ng-controller="MyCtrl">
     <label>Note Type: </label><br />
     <select ng-model="myModel.NoteType">
        <option value="Type 1">Type 1</option>
        <option value="Type 2">Type2</option>
      </select>
     <label>Note Author: </label><br />
       <input type="text" ng-model="myModel.NoteCreator" /><br />
   <label>Note Description: </label><br />
   <textarea ng-model="myModel.NoteDescription" rows="4" cols="50"></textarea><br />
    
     <button ng-click="saveNewNote(myModel)">Save Note</button>
    
</div>

＆＃13;

Answer 2

$ scope.saveNewNote = function（）{noteData.push（$ scope.myModel）; }

从HTML表单插入JSON数组

2 个答案: