Question

我想在输入值之前显示输入字段粉红色，在输入值之后显示绿色。但是，当我应用样式时，它只适用于第一行。有什么错误吗？

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

提前谢谢。

Answer 1

你可以这样做

＆＃13;

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

＆＃13;

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

＆＃13;

<!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>

＆＃13;

样式不适用于角度JS

1 个答案: