angularjs使div只讀 - 在哪裏放置業務邏輯

我想基於複選框只讀一節。典型的例子是主要地址和帳單地址。用戶輸入主地址，並可以選擇帳單地址與主地址相同。angularjs使div只讀 - 在哪裏放置業務邏輯

例如參見fiddle。

HTML（主地址）：

<fieldset ng-model="primaryAdd"> 
        <legend>Primary Address:</legend> 
        House#: <input type="text" ng-model="primaryAdd.houseNum"><br> 
        Street: <input type="text" ng-model="primaryAdd.street"><br> 
        State: <input type="text" ng-model="primaryAdd.state"><br> 
        Zip: <input type="text" ng-model="primaryAdd.zip"> 
</fieldset>

HTML（同地址）

<input type="checkbox" name="makeSameAsAddress" ng-model="makeSameAsAddressCheck" ng-click="makeSameAsAddress($event)">Same as above<br/>

HTML（帳單地址）

<fieldset ng-model="billingAddress"> 
        <legend>Billing Address:</legend> 
        <div>     
         <div style="font-size:small">if the address is the same as residence, prefill and make it readonly</div> 
         House#: <input type="text" ng-model="billingAddress.houseNum" ng-readonly="makeSameAsAddressCheck"><br> 
         Street: <input type="text" ng-model="billingAddress.street" ng-readonly="makeSameAsAddressCheck"><br> 
         State: <input type="text" ng-model="billingAddress.state" ng-readonly="makeSameAsAddressCheck"><br> 
         Zip: <input type="text" ng-model="billingAddress.zip" ng-readonly="makeSameAsAddressCheck"> 
        </div> 
       </fieldset>

小提琴確實工作。當我點擊「與上面相同」複選框時，帳單部分從主要部分獲取地址並且是隻讀的。問題是爲什麼我不能將ng-readonly放在fieldset或輸入周圍的div上。我必須在所有輸入上進行ng-readonly。我覺得必須有更好的方式來做到這一點。

也許我需要創建一個名爲「makeSameAsPrimaryAndReadOnly」的指令。我讀到商業邏輯應該坐在指令中，而不是直接指向HTML或控制器。但我沒有看到這樣做的重點。除非我在多個地方重複使用帳單地址。其次，哪裏是初始化模型並有模式與其他控制器共享的好地方？我想象一個工廠對此最好？謝謝。

角巖！

來源

2013-05-14 U-L

你可以創建一個指令，但這可能是矯枉過正的。

您不能將ng-readonly應用於div或fieldset，就像它是css風格一樣。老實說，如果你只有4個輸入，我認爲它不會太糟糕。

可以簡化的複選框的邏輯（和消除NG擊事件）通過監視表達式：

$scope.$watch('makeSameAsAddressCheck', function (newv, oldv) { 
    if (newv) 
     $scope.billingAddress = $scope.primaryAdd; 
    else if (newv !== oldv) 
     $scope.billingAddress = angular.copy($scope.primaryAdd);   
});

注意，當您打開該複選框，我都設置範圍變量引用同一個對象。現在，當您對主要地址進行修改時，它會在帳單郵寄地址中自動更新。

當您關閉複選框時，我製作了主要地址的副本。他們現在可以獨立編輯。在控制器

http://jsfiddle.net/fcSgz/

業務登錄是罰款。事實上，這就是它應該的地方。

您可以在使用「工廠」功能創建的服務中初始化模型。

來源

2013-05-14 02:38:01

謝謝你解釋觀察者。我能夠將ng-show添加到div和fieldset。希望ng-readonly也一樣。我想通過使用Web服務或REST API來預先填充表單/應用程序。所以我可以定義一個服務來做到這一點。我有一個工廠定義我的模型結構並將其放在範圍內。我知道這是一個額外的步驟，但我喜歡有一個單獨的模型層的想法。所有的業務邏輯都進入觀察者（在控制器中）或指令（用於更復雜的dom操作）。這麼多要學習！我想我有足夠的知識開始。 – 2013-05-14 08:16:25

angularjs使div只讀 - 在哪裏放置業務邏輯

回答

相關問題