angularjs - оптимизировать отправку формы (автоматически) на основе грязной области видимости

Question

Проблемное пространство

У меня есть проблема, когда я отправляю форму, основанную на выполняемых критериях, а не на кнопке отправки формы.

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

После этого страница автоматически получает результаты.

Допустим, у меня есть флажки и еще несколько выпадающих меню. Любые будущие варианты выбора из трех упомянутых раскрывающихся списков, флажков и раскрывающихся списков автоматически фильтруют результаты.

Что я знаю

Теперь, прочитав угловую документацию, я проверил $ ​​dirty, $pristine и операции с обоими, такими как $setDirty и $setPristine; Тем не менее, кажется, что это для FormController

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

Что у меня пока

В общем, я надеялся, что буду использовать функции слежения за прицелом, но я мало что знаю об этом. Я создал один контроллер для своего приложения и одну область видимости, так как это казалось мне наиболее простым. У меня есть сторонние плагины, которые играют определенную роль в области:

$ scope.3rdpartyConfig = {prop1: [], prop2: getData ()}

Я не думаю, что что-то подобное будет полезно для проверки отправки формы, если я собираюсь проверить состояние $ dirty в моей форме.

Затем я подумал о старом способе, которым я обычно что-то делал, но "оскорблял" его:

так что я бы что-то вроде:

<input type="checkbox" ng-model="state.Checked" ng-change="checkIfWeCanSubmitThenSubmit()" id="ng-change-example1" />

Так что у меня будут ng-изменения и ng-клики по всей моей html-форме, попадающие в эту функцию, где функция будет выглядеть следующим образом:

$scope.checkIfWeCanSubmitThenSubmit= function() {
    var validated = false;
    //check to see if dropdown1 or dropdown2 are selected
    //check to see if dropdown3 is selected
    // add more here per requirement

    //if the above are true, then validated = true

    if (validated)
    {
         //add dropdown4 and 5, and checkbox groups into filter
    }

    submit();
}

Но я думал, что это не угловой способ делать вещи, поскольку это, конечно, не облегчается.

Я надеялся, что область действия предложит какой-то способ, где я могу проверить, какие части моей области грязные или нет, прежде чем я смогу отправлять и извлекать данные, или если есть лучший способ, чем добавление этой функции в каждый HTML элемент; как наличие какого-то трекера, который я могу проверить и посмотреть.

Это напоминает мне, что я не хочу иметь серию $scope.$ Watch, просто будет слишком много работы для привязки к каждому фрагменту HTML-кода, если только нет способа наблюдать за областью действия. Коллекция конкретных переменных области, я бы не возражал.

как (простите за псевдокод):

$scope.$watch('dropdown1, dropdown2, dropdown4', function(dirty, pristine)
{
    if (dirty)
    { blah blah blah }
});

Изменить (28.02.2013):

Я попытался сделать это так:

$scope.masterCriteria =
[
    { DropDown1: $scope.AppModel.Dropdown1},
    { DropDown2: $scope.AppModel.Dropdown2 },
    { DropDown3: $scope.AppModel.Dropdown3 },
    { Checkbox1: $scope.AppModel.Checkbox1 },
    { Checkbox2: $scope.AppModel.Checkbox2 }
];

$scope.$watch('masterCriteria', function (newVal) {
    if (newVal) { logger.info("did I change?"); }
}, true);

Наблюдатель ничего не обнаружил, и любые значения, которые я изменил в области AppModel, не были обнаружены в $watch. Стоило попробовать, все еще пытаясь понять это.

Answer 1

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

 $scope.state = { checkbox1: false, checkbox2: true, ... }

Позже привязать поля ввода к полю state объект:

 <input ng-model="state.checkbox1" ... >

И смотри state Объект для перехвата всех обновлений вложенных полей:

 $scope.$watch('state', ...

Пример JsFiddle здесь