2014-02-28 93 views
0

問題空間angularjs - 基於髒範圍

我其中我提交基於條件的形式來實現,而不是具有表單提交按鈕的問題簡化形式(自動)的提交。

比方說,我有3個下拉菜單,前兩個分組,但需要選擇一個,這意味着我可以選擇一個或另一個,但我不能讓它們爲空,第三個是必填字段。

之後,頁面自動提取結果。

可以說我有複選框和一些更多的下拉菜單。將來提及的3個下拉列表,複選框和下拉列表中的任何選項都會自動過濾結果。

我所知道的

現在讀取角文檔後,我在$檢查了髒,$質樸和操作上都一樣,$使用setDirty和$ setPristine;然而,這似乎是一個FormController

所以我假設這是有用的整個範圍。我沒有看到我可以找出選定範圍的傾向。

我至今

所以基本上,我希望我可以利用的範圍的跟蹤功能,但我不很瞭解。我爲我的應用程序和單個範圍創建了一個控制器,因爲這對我來說似乎最簡單。我有第三方插件,發揮作用到像範圍:

$ scope.3rdpartyConfig = { PROP1:[], PROP2:的getData() }

我不認爲這樣的事情如果我要檢查表單的$ dirty狀態,在檢查表單提交時會很有用。

於是我想到了我以前做的事情的舊方式,但「angularlizing」吧:

所以我有這樣的:

<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 } 
}); 

編輯(2013年2月28日):

我試圖做這樣說:

$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中找到。值得一試,仍然試圖弄清楚這一點。

回答

0

您可以稍微更改與輸入表單相關的模型和組字段。將它們放入單個對象中。就像這樣:

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

後來綁定的輸入框中的state對象的領域:

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

,觀state對象捕捉嵌套字段的所有更新:

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

JsFiddle example here

+0

有趣的是,你也建議我製作另一個範圍變量le ts say .. readyToSubmit,並讓該變量檢查其他範圍變量的數據?然後在readyToSubmit上放一個手錶?這聽起來很有趣。這實際上對我來說似乎是一種代理模式。 – sksallaj

+0

我會實現它,看看它是如何工作的。謝謝。 – sksallaj