Javascript 使用DOM操纵在按钮单击事件上将类添加到表单字段_Javascript_Angularjs_Forms

Javascript 使用DOM操纵在按钮单击事件上将类添加到表单字段

javascript angularjs forms

Javascript 使用DOM操纵在按钮单击事件上将类添加到表单字段,javascript,angularjs,forms,Javascript,Angularjs,Forms,我想通过单击按钮将类添加到输入字段。我搜索了很多，但没有找到令人满意的结果。我只想在单击submit按钮时将class red添加到我的输入字段中 <style> .red{background-color:red;} </style> </head> <body> <div ng-app="myapp"> <div ng-controller="formController">

我想通过单击按钮将类添加到输入字段。我搜索了很多，但没有找到令人满意的结果。我只想在单击submit按钮时将class red添加到我的输入字段中

 <style>
    .red{background-color:red;}
    </style>
</head>
<body>
    <div ng-app="myapp">

        <div ng-controller="formController">
            <form action='#' method="POST" formvalidation novalidate>
                <table>
                    <tr>
                        <td>Name</td>
                        <td><input name="name"  type="text" id="name" ng-model="person.Name" required></td>
                    </tr>
                    <tr>
                        <td>age</td>
                        <td><input name="age" id="age" type="number" ng-model="person.age" required min="10" max="20"></td>
                    </tr>
                    <tr>
                        <td>
                            <input id="submit" type="submit" value="submit" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>

使用ng类在ng单击事件时激活您的类我知道，但想知道dom操作的概念为什么要进行dom操作？使用ng类非常简单。@gauravbhavsar是对的，ng类是在您想要的行为的指令中构建的。@MuhammadNasir如果您的更改超出了angular上下文的范围，那么您必须手动调用$digest来告诉angular观看。因此，您必须调用scope.$apply；对的更改反映了页面上的所有更改之后。

var myapp=angular.module("myapp",[]);

myapp.controller('formController',function($scope){ 

});
myapp.directive("formvalidation",function(){
    var directive={}
    directive=function(scope,element,attrs)
    {
        var test=angular.element().find('#name');
        var button=angular.element().find("#submit");
        $(button).on('click',function(){

            $(test).addClass('red');
        });
    }
    return {
    restrict: 'E',
    link: directive
};
});