Как мне опубликовать существующие данные JSON в DOM с помощью пользовательского ввода в AngularJS?

Question

Я извлекаю из внешнего JSON-файла и отправляю содержимое в dom в виде серии "карточек". У меня есть раздел, который позволяет пользовательский ввод, чтобы добавить к карточкам. Мой вопрос: как мне добавить то, что пользователь вставляет в существующие карты, и чтобы оно выглядело одинаково?

Ниже приведено то, что у меня есть в HTML. Первый контроллер - это шаблон, используемый для публикации данных JSON. Второй контроллер - это входная секция. Он собирает пользовательский ввод и сохраняет его в переменной master.

Как мне затем использовать это, чтобы опубликовать его вместе с остальными данными JSON? Я просто скопировал и вставил раздел ввода пользователя с веб-сайта AngularJS и изменил несколько вещей, но я могу быть совершенно не согласен с этим.

<code><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}}

master = {{master}}

Если это полезно, вот контроллер в файле JS для контроллера "ExampleController":

  // 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();
    }]);

Answer 1

Вы можете сделать это с помощью массива: Взять 1 массив для собак Нажмите начальное значение в собаке [] и используйте 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>