样式不在角度JS

我想在输入值之前显示输入字段，输入值之后显示绿色。但是，当我应用风格时，它仅适用于第一行。有没有错误？样式不在角度JS

<script 
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
    <style> 
input.ng-invalid { 
    background-color:pink; 
} 
input.ng-valid { 
    background-color:lightgreen; 
} 
</style> 
</head> 
<body> 

    <div ng-app="myapp" ng-controller="mycont"> 
    <form name="myform"> 

     <table> 
      <tr> 
       <td>Faculty ID</td> 
       <td><input type="text" name="facultyid" ng-model="faculty.id" required /><br><span style="color:red" ng-show="myform.facultyid.$touched && myform.facultyid.$invalid">Id is required</span></td> 

      </tr> 
      <tr> 
       <td>Faculty Name:</td> 
       <td><input type="text" ng-model="faculty.name" /></td> 
      </tr> 
      <tr> 
       <td>Faculty Salary:</td> 
       <td><input type="text" ng-model="faculty.salary" /></td> 
      </tr> 
      <tr><td><input type="checkbox" ng-model="agree" required>Agree terms and conditions</td></tr> 
      <tr> 
       <td colspan="2"><button ng-disabled="myform.$invalid" ng-click="addfaculty(faculty)">ADD</button></td> 
      </tr> 
     </table> 
     </form>

在此先感谢您。

来源

2017-08-04 Pravin

Plunker请。 – anu

你有没有使用任何条件来改变风格？它默认设置为红色，不会改变。 – Shahzad

没有。我使用的条件ng-valid和ng-invalid – Pravin

你能做到这样

angular.module('formExample', []) 
 
    .controller('ExampleController', ['$scope', function($scope) { 
 
     $scope.submit = function() { 
 
     return false; 
 
     };  
 
    }]);

input.ng-invalid { 
 
background-color:pink; 
 
} 
 
input.ng-valid { 
 
background-color:lightgreen; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body ng-app="formExample"> 
 
<div ng-controller="ExampleController"> 
 
    <form novalidate> 
 
    <table> 
 
      <tr> 
 
       <td>Faculty ID</td> 
 
       <td><input type="text" name="facultyid" ng-model="faculty.id" required /><br><span style="color:red" ng-show="myform.facultyid.$touched && myform.facultyid.$invalid">Id is required</span></td> 
 

 
      </tr> 
 
      <tr> 
 
       <td>Faculty Name:</td> 
 
       <td><input type="text" ng-model="faculty.name" required /></td> 
 
      </tr> 
 
      <tr> 
 
       <td>Faculty Salary:</td> 
 
       <td><input type="text" ng-model="faculty.salary" required /></td> 
 
      </tr> 
 
      <tr><td><input type="checkbox" ng-model="agree" required>Agree terms and conditions</td></tr> 
 
      <tr> 
 
       <td colspan="2"><button ng-disabled="myform.$invalid" ng-click="addfaculty(faculty)">ADD</button></td> 
 
      </tr> 
 
     </table> 
 
     
 
    </form> 
 

 
</div> 
 
    </body> 
 
</html>

来源

2017-08-04 06:52:34

但是，只有在单击添加后，所有字段都变为红色。我运行代码时需要它。并且还需要使用尽管submit.Is有一种方法吗？ – Pravin

我已编辑它现在检查它 –

样式不在角度JS

回答

相关问题