Как я могу отменить (удалить) angular модели, если не в DOM

Вот простая демонстрация того, чего я пытаюсь достичь.

 <div ng-controller="MyCtrl">
     <input type="button" ng-click="a=!a" value="toggle a"/>
     <div ng-if="a">
         <input type="text" ng-model="del.a1" />{{del}}
     </div>
     <input type="text" ng-model="del.a2" />
     {{del}}
 </div>

Первоначально значение del является {} и ng-if ложно, свойство a1 находится под условием ng-if. Тестовый пример:

шаг 1: переключить ng-if на true, чтобы a1 был виден

Шаг 2: введите некоторое значение в a1 (вы можете в любое время ввести значение в свойство a2)

Шаг 3: теперь, если я снова переключу ng-if на false, что я ищу, это свойство a1 должно быть удалено из модели (т.е. я просто хочу, чтобы angular связывал те модели, которые видны на DOM), например this

Вот пример FIDDLE для вышеуказанного тестового примера.

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

Надеюсь, я понял вопрос.

Справка

Ответы

Ответ 1

Вы можете посмотреть a значение с помощью $scope.$watch и удалить ключ a1 из объекта del, если для параметра установлено значение false

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function ($scope) {
    $scope.del = {};
    $scope.a = false;

    $scope.$watch('a', function(value) {
        if (!value) {

            delete $scope.del['a1'];
        }

    });

})

См. рабочую демонстрацию ниже

var myApp = angular.module('app', []);
myApp.controller('MyCtrl', function($scope) {
  $scope.del = {};
  $scope.a = false;

  $scope.$watch('a', function(value) {
    if (!value) {

      delete $scope.del['a1'];
    }

  });

})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyCtrl">
    <input type="button" ng-click="a=!a" value="toggle a" />
    <div ng-if="a">
      <input type="text" ng-model="del.a1" placeholder="a1" />{{del}}</div>
    <input type="text" ng-model="del.a2 " placeholder="a2" />{{del}}
  </div>

Ответ 2

В вашем примере просматриваются только модели, видимые в DOM.

Если вы хотите, чтобы значение модели было удалено из объекта, вам нужно будет посмотреть "a", который знает, какие значения удалить из модели.