Question

我有一个角度指令，以便于在运行时添加引导类，以简化应用“form-group”，“control-label”和“form-control”的需要。只要我不尝试一次包含多个级别，这就完美地工作，这意味着我似乎无法使这个工作在“form-group中包含多个div。我已经附加了代码，原始HTML和处理过的HTML以供审阅看看是否有人可能对我如何修改以使该工具有意义有所了解。

指令：

    (function () {

    "use strict";

    angular.module("ppac")
        .directive("formfix", formfix);

    var addClasses = function (element) {
        var input = element.querySelector("input, textarea, select");
        var type = input.getAttribute("type");
        if (type !== "checkbox" && type !== "radio") {
            input.classList.add("form-control");
        }

        var label = element.querySelector("label");
        label.classList.add("control-label");
        element.classList.add("form-group");
    };

    function formfix() {
        return {
            restrict: "A",
            link: function (scope, element) {
            addClasses(element[0]);
                }
        }
    }
})();

HTML表单：

<form name="contactForm" ng-submit="model.submit()" novalidate>
        <div class="form-horizontal">
            <div formfix>
                <label for="firstName" class="col-md-2">First Name</label>
                <div class="col-md-3">
                    <input type="text" name="firstName" id="firstName" ng-model="model.contact.firstName" />
                </div>
                <label for="lastName" class="col-md-2">Last Name</label>
                <div class="col-md-3">
                    <input type="text" name="lastName" id="lastName" ng-model="model.contact.lastName" />
                </div>
            </div>
        </div>
    </form>

已处理的HTML：

<form name="contactForm" ng-submit="model.submit()" novalidate="" class="ng-pristine ng-valid">
            <div class="form-horizontal">
                <div formfix="" class="form-group">
                    <label for="firstName" class="col-md-2 control-label">First Name</label>
                    <div class="col-md-3">
                        <input type="text" name="firstName" id="firstName" ng-model="model.contact.firstName" class="ng-pristine ng-valid form-control ng-empty ng-touched">
                    </div>
                    <label for="lastName" class="col-md-2">Last Name</label>
                    <div class="col-md-3">
                        <input type="text" name="lastName" id="lastName" ng-model="model.contact.lastName" class="ng-pristine ng-untouched ng-valid ng-empty">
                    </div>
                </div>
            </div>
        </form>

Answer 1

您可以使用ng-class动态添加类，如文档所示

ngClass指令允许您动态设置CSS类 HTML元素通过数据绑定表示所有类的表达式待补充。

<强>参考

https://docs.angularjs.org/api/ng/directive/ngClass

以编程方式将类应用于angularjs表单

1 个答案: