Блог

Главная - Вопросы по программированию - Как получить файл json в angularjs при нажатии кнопки?

Как получить файл json в angularjs при нажатии кнопки?

#javascript #angularjs

#javascript #angularjs

Вопрос:

На самом деле я новичок в angularjs.

Я создал одну форму, и она содержит два поля ввода.

Ниже полей ввода,

 <input ng-model="id.todoList" type="text" name="input" placeholder="Enter tasks here">
<input ng-model="id.todoList1" type="text" name="input" placeholder="Enter tasks here">

После продолжения ввода значений,

Я хочу, чтобы значения сохранялись в виде массива. Я сделал!!!!

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

Но основная проблема заключается в следующем…

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

Кто-нибудь может помочь в этом?

Прикреплена ссылка на скрипача: ссылка на скрипача

Ответ №1:

Попробуйте создать массив объектов json, нажимая todoList amp; todoList1 

 var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.id = {   // Creating id object
    todoList: "",
    todoList1: ""
  }

  $scope.addTodo = function() {
    // Creating a json array of objects with 
    // key todoList amp; todoList1
    $scope.todos.push({
      todoList: $scope.id.todoList,
      todoList1: $scope.id.todoList1,
    })
  }

  $scope.clearAll = function() {
    $scope.todos = []
  }

});

ДЕМОНСТРАЦИЯ

Ответ №2:

Попробуйте это :

   <body ng-app="plunker">
    <div class="container" ng-controller="MainCtrl">
      <div class="main">
        <p>Todo App</p>
        <input ng-model="id.todoList" type="text" name="input" placeholder="Enter tasks here">
        <input ng-model="id.todoList1" type="text" name="input" placeholder="Enter tasks here">
        <button ng-click="addTodo()">Add</button>
        <ul>
          <li ng-repeat="todo in todos track by $index">
            {{todo}}
          </li>
        </ul>
      </div>
    </div>
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script>
  
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.todos = []
  $scope.todoList = "";

  $scope.addTodo = function(){
    var temp =  $scope.id;
    $scope.todos.push({"todoList":$scope.id.todoList,"todoList1":$scope.id.todoList1});
    console.log($scope.todos);
    $scope.id.todoList = '';
    $scope.id.todoList1 = '';
  }

  


});
</script>
  </body>

Ответ №3:

вы можете изменить это

 <button ng-click="addTodo(id)">Add</button>

и получить значение формы в js

 id.todoList
id.todoLIst1
Метки: