Question

我想基于一个复选框创建一个readonly部分。典型示例是主地址和帐单地址。用户输入主地址，并可以选择帐单地址与主地址相同。

例如，请参阅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直接或控制器。但我没有看到这样做的意义。除非我在多个地方重复使用帐单邮寄地址。

其次，在哪里有一个初始化模型的好地方，并有一个模式与其他控制器共享等？我想工厂最适合这个？谢谢。

角岩!!

Answer 1

你可以创建一个指令，但为此目的可能有点过分。

您不能将ng-readonly应用于div或fieldset，就像它是css样式一样。老实说，如果你只有4个输入，我认为这不是太糟糕。

您可以使用监视表达式简化复选框的逻辑（并消除ng-click事件）：

$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/

控制器中的业务登录很好。事实上，这应该是它应该存在的地方。

您可以在使用“工厂”功能创建的服务中初始化模型。

angularjs使div只读 - 在哪里放置业务逻辑

1 个答案: