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

Question

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

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

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

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

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

Что я знаю

Теперь после прочтения угловых документаций, я проверял на $ загрязнены, $ нетронутые и операции на оба, как $ SetDirty и $ setPristine; однако, кажется, что это для FormController

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

То, что я до сих пор

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

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

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

Тогда я подумал о старом, как я использовал, чтобы делать вещи, но «angularlizing» это:

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

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

Так что я бы имея 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 } 
}); 

Edit (2/28/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 example here