AngularJS: Как получить измененный ключ и значение из существующего объекта в форме?

Question

У меня есть объект, который содержит 100 ключей, пары значений.

$scope.obj = {
  key1: value1,
  key1: value1,
  .
  .
  .
  key100: value100
}

У меня 100 входов

<form>
   <input value="obj.key1" ng-model="obj.key1" />
   <input value="obj.key2" ng-model="obj.key2" />
   <input value="obj.key3" ng-model="obj.key3" />
   .
   .
   .
   <input value="obj.key100" ng-model="obj.key100" />
   <button ng-click="submit> </button>
</form>

Когда я получу данные, данные будут отправлены на сервер. Некоторое время я буду менять значения, а иногда нет. Если я изменю значение в одном входе, я хочу, чтобы key,value с объекта. Так что я могу отправить серверный вызов с этими данными, чтобы не отправлять все данные.

Answer 1

Я бы достиг этого, используя значение по умолчанию ngForm директивы как $dirty и объект "сохранить состояние" ваших исходных входных значений. Это простое решение для достижения того, что вы хотите. ngForm сам по себе не предоставляет исходные значения, поэтому вам нужно создать "объект сохранения" и сравнить их вручную.

Посмотреть

<div ng-controller="MyCtrl">
  <form name="myForm" ng-submit="submit()">
    <input type="text" name="key1" ng-model="obj.key1"><br />
    <input type="text" name="key2" ng-model="obj.key2"><br />
    <input type="text" name="key3" ng-model="obj.key3">
    <input type="submit" id="submit" value="Submit" />
  </form>
</div>

Приложение AngularJS

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

myApp.controller('MyCtrl', function ($scope) {

    $scope.obj = {
      key1: 'test 1',
      key2: 'test 2',
      key3: 'test 3',
    }

    var originalValues = angular.copy($scope.obj);

    $scope.submit = function () {

      var paramsChanged = {};

      angular.forEach($scope.obj, function (value, key) {
          if ($scope.myForm[key].$dirty && originalValues[key] !== value) {
            paramsChanged[key] = value;
          }
      });

      console.log(paramsChanged);
    }
});

> демо скрипка

Answer 2

Ты можешь использовать ng-change обнаруживать любые изменения, а также синтаксис (ключ, значение) в ng-repeat перечислить ваши входы. Вот демо:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.obj = {
    "key1": "value1",
    "key2": "value2",
    "key3": "value3"
  }

  var toSend = [];
  $scope.select = function(key) {
    var s = {};
    s[key] = $scope.obj[key]
    toSend.push(s); // or just the value: $scope.obj[key]
  }

  $scope.submit = function() {
    console.log(toSend)
    $scope.sent = toSend;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <form ng-submit="submit()">
    <div ng-repeat="(key,value) in obj">
      <input ng-change="select(key)" ng-model="value" /><br>
    </div>
    <button type="submit">Send</button>
  </form>

  <pre>{{sent | json}}</pre>

</div>

Answer 3

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

    <input value="obj.key100" ng-model="obj.key100" ng-change="selectedValue(obj.keyx)" />

Угловой код

 $scope.tempValues=[];
 $scope.selectedValue = function(x) {
    $scope.tempValues.push(x);
 }

Answer 4

Имейте копию переменной и непосредственно перед отправкой на сервер сравните объект модели с скопированной переменной, используя функцию сравнения, как показано ниже:

// At the time of initialization
$scope.obj = [ ... ];
var copiedObj = angular.copy($scope.obj);

// At the time of submit
var changed = {};

Object.keys(copiedObj).forEach(key => {
  if(copiedObj[key] !== $scope.obj[key]) {
    changed[key] = $scope.obj[key];
  }
});

// Submit `changed` to the server

Если предположить, copiedObj это копия оригинала $scope.obj, changed будет содержать ключи, которые фактически изменены. Так что вы можете отправить changed на сервер.

Answer 5

Вы можете использовать $watch для отслеживания конкретных изменений в $scope,

$scope.$watch('obj.key1', function(newValue, oldValue) {
  console.log('Key1 was updated from' + oldValue + ' to ' + newValue');
});