时间戳

首页 > 解决方案 > 如何使用 AngularJS 中的用户输入发布到 DOM 中的现有 JSON 数据？

javascript - 如何使用 AngularJS 中的用户输入发布到 DOM 中的现有 JSON 数据？

问题描述

我正在从外部 JSON 文件中提取内容并将内容作为一系列“卡片”发布到 dom。我有一个部分允许用户输入添加到卡片中。我的问题是如何将用户放入现有卡片的内容添加到现有卡片中并使其看起来相同？

以下是我在 HTML 中的内容。第一个控制器是用于发布 JSON 数据的模板。第二个控制器是输入部分。它收集用户输入并将其存储在master变量中。

然后我如何使用它与其余的 JSON 数据一起发布？我刚刚从 AngularJS 网站复制并粘贴了用户输入部分并更改了一些东西，但我可能完全不同意它。

<div ng-app="app" ng-controller="ctrl as $ctrl">
<button class="index" ng-click="showDetails = ! showDetails">Index</button>
<button class="add" ng-click="showDetails = ! showDetails">Add</button>    
<ul class="cards" ng-hide="showDetails">
        <li class="list" ng-hide="showDogs" style="list-style:none;" ng-repeat="dog in $ctrl.dogs">
            <strong>{{dog.breed}}</strong>
            <br>
        <strong>Description:</strong> <span>{{dog.description}}</span>
            <br>
        <strong>Size:</strong> <span style="color:blue;">{{dog.size}}</span>
            <br>
        <strong>Lifespan:</strong> <span style="color:green;">{{dog.lifespan}}</span>
            <br><br>
        <button class="delete" ng-click="showDogs = !showDogs">Delete</button>
        </li>
    </ul>

    <div ng-controller="ExampleController" class="addData" ng-show="showDetails">
        <h1>Add Your Own Breed</h1>
      <form novalidate class="simple-form">
        <label>Breed: <br><input class="inputBox" type="text" ng-model="user.breed" /></label><br />
        <label>Description: <br><input class="inputBox" id="description" type="text" ng-model="user.description" /></label><br />
        <label>Size: <br><input class="inputBox" type="text" ng-model="user.size" /></label><br />
            <label>Lifespan: <br><input class="inputBox" type="text" ng-model="user.lifespan" /></label><br />
        <input type="button" ng-click="reset()" value="Reset" />
        <input type="submit" ng-click="update(user)" value="Save" />
      </form>
      <pre>user = {{user | json}}</pre>
      <pre>master = {{master}}</pre>
    </div>
    </div>

如果有帮助，这里是“ExampleController”控制器的 JS 文件中的控制器：

  // controller to for the Add Breeds page
  .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

      $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
      };

      $scope.reset();
    }]);

标签： javascriptangularjsjsondom

解决方案

您可以通过使用数组来做到这一点：为狗取 1 个数组在 dog[] 中推送初始值并使用 ng-repeat 在 HTML 上显示

接受用户输入并推送到狗数组

$scope.dogs = [];

dog = {
   "breed" : "some",
   "description" : "some",
   "size" : "some",
   "lifespan" : "some",
}

dogs.push(dog);
<ul class="cards" ng-hide="showDetails" data-ng-repeat="dog in dogs">
    <li class="list" ng-hide="showDogs" style="list-style:none;" ng-repeat="dog in $ctrl.dogs">
        <strong>{{dog.breed}}</strong>
        <br>
        <strong>Description:</strong> <span>{{dog.description}}</span>
        <br>
        <strong>Size:</strong> <span style="color:blue;">{{dog.size}}</span>
        <br>
        <strong>Lifespan:</strong> <span style="color:green;">{{dog.lifespan}}</span>
        <br><br>
        <button class="delete" ng-click="showDogs = !showDogs">Delete</button>
    </li>
</ul>

推荐阅读