2017-08-04 11 views
1

値を入力する前にピンク色の入力フィールドを表示し、値を入力した後に緑色を表示したいとします。しかし、私がスタイルを適用するとき、それは最初の行のためだけに働いています。何かエラーがありますか?角型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> 

ありがとうございます。

+0

Plunkerそれを行うことができますしてください。 – anu

+0

スタイルを変更する条件は一切ありませんか?変更されないデフォルトでは赤色に設定されています。 – Shahzad

+0

番号。私は条件ng-validとng-invalidを使用しました – Pravin

答えて

0

あなたはこのよう

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>

+0

追加をクリックした後で、すべてのフィールドが赤色に変わります。コードを実行するときに必要です。ボタンにもかかわらず。方法はありますか? – Pravin

+0

編集しました –

関連する問題