Как я могу отвязать (удалить) угловые модели, если они не в 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 равно false, свойство a1 находится в состоянии ng-if. Прецедент :

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

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

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

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

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

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

Пожалуйста помогите


javascript dom angularjs unbind
person Vinod Louis    schedule 25.11.2014    source источник
comment
Не на 100% то, что вы просите, но кажется, что вы можете просто $watch a и при необходимости удалить/сбросить свойство a1 на del. Если это не решит вашу проблему, рассмотрите возможность обновления вашего вопроса с более подробной информацией.   -  person Jack    schedule 26.11.2014
comment
Привет, Джек, часы не могут решить мою проблему в моем приложении. У меня есть объект, который имеет от 500 до 600 свойств и его динамически присваиваемые значения, поэтому в основном я просто хочу, чтобы объект сохранялся с теми свойствами, модель которых видна в DOM   -  person Vinod Louis    schedule 26.11.2014

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете просмотреть значение 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>

person sylwester    schedule 25.11.2014
comment
поскольку мои модели динамичны и имеют огромные размеры, мне трудно удалять свойства одно за другим. - person Vinod Louis; 26.11.2014
comment
@VinodLouis, в таком случае, как вы разместили 500-600 входов на странице просмотра? - person sylwester; 26.11.2014
comment
На самом деле я определяю пустой объект, например answer = {}, а затем запускаю временную модель как answer.a answer.b и т.д.... - person Vinod Louis; 26.11.2014
comment
@VinodLouis, так что аналогичным образом вы можете удалить ключ объекта внутри функции $watch - person sylwester; 26.11.2014

arrow_upward
0
arrow_downward

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

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

person Enzey    schedule 25.11.2014