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只读 - 在哪里放置业务逻辑

回答

相关问题