0

我想根据一个复选框将一个部分设为只读。典型的例子是主要地址和帐单地址。用户输入主地址，可以选择账单地址与主地址相同。

例如，参见小提琴。

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 放在字段集或输入周围的 div 上。我必须将 ng-readonly 放在所有输入上。我觉得必须有更好的方法来做到这一点。

也许我需要创建一个名为“makeSameAsPrimaryAndReadOnly”的指令。我读到业务逻辑应该放在指令中，而不是直接放在 HTML 或控制器中。但我不明白这样做的意义。除非我在多个地方重复使用账单地址。

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

角石！！

4

1 回答 1

0

您可以创建一个指令，但出于此目的它可能是矫枉过正。

您不能将 ng-readonly 应用于 div 或字段集，就像它是 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/

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

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

于 2013-05-14T02:38:01.960 回答