誰かがこれを手伝ってくれますか？ここにはプランカがあります。ドロップダウンが選択されていない場合にCSSを変更してください
http://plnkr.co/edit/M3rJYnqhODRapXBBI6Ck?p=preview
plunkerに示すように、私は、入力フィールドとして日付、ユーザ、車、速度と走行距離を有しています。
マイレージとスピードの入力値に最初に赤色のテキスト色を使用したいとします。ユーザーと車のドロップダウン値を選択した場合にのみ、テキストの色が黒に変わります。
誰かが提案できますか？
<html>
</html>
あなたが最初に赤に入力されたテキストの色を設定し、選択オプションの変更に、バック黒にあなたがベースの特定のクラスを設定するためにng-classを使用することができ、この
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DateParserDemoCtrl', function ($scope, uibDateParser) {
$scope.today = function() {
$scope.tradeDate = new Date() ;
};
$scope.today();
$scope.clear = function() {
$scope.tradeDate = null;
};
// Disable weekend selection
$scope.disabled = function (date, mode) {
return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6);
};
//$scope.toggleMin = function() {
// $scope.minDate = $scope.minDate ? null : new Date();
//};
//$scope.toggleMin();
$scope.maxDate = new Date(2020, 5, 22);
$scope.open = function() {
$scope.popup1.opened = true;
};
$scope.setDate = function (year, month, day) {
$scope.tradeDate = new Date(year, month, day);
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events =
[
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
$scope.getDayClass = function (date, mode) {
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
};
$scope.inputColorClass = 'red';
$scope.userCarChange = function() {
$scope.inputColorClass = 'black';
}
});.data {
margin:50px;
}
.calendar{
width:150px;
display:inline-block;
}
.button {
display:inline-block;
}
.merge {
display:inline-block;
}
.distance {
margin-right:30px;
}
.distance2{
margin-right:73px;
}
.distance3{
margin-right:74px;
}
.speed {
margin-right:34px;
}
.mile{
margin-right:54px;
}
.red {
color: red;
}
.black {
color: 000;
}<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="data.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DateParserDemoCtrl" class = 'data'>
<div class='merge distance'>
<label>Date Select:</label> </div><div class='merge'><input type="text" class="form-control calendar" uib-datepicker-popup="MM/dd/yyyy" ng-model="tradeDate" is-open="popup1.opened" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
</div>
<div class ='merge'><button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button></div>
<br><br>
<div class="merge distance2"><label>User:</label></div>
<div class="merge">
<select class="drpDwnRp" ng-model="params.user" ng-change="userCarChange()">
<option value="" disabled="" selected="">Select User</option>
<option value="A">Rick</option>
<option value="B">Mike</option>
</select>
</div>
<br><br>
<div class="spLblGrp merge distance3"><label>Cars:</label></div>
<div class="merge">
<select ng-if="params.user == 'A'" ng-model="params.car" ng-change="userCarChange()">
<option value="" disabled="" selected="">Select Car</option>
<option value="D1">Honda</option>
<option value="D2">Prius</option>
</select>
<select ng-if="params.user == 'B'" ng-model="params.car">
<option value="" disabled="" selected="">Select Car</option>
<option value="L1">Tesla</option>
<option value="L2">BMW</option>
</select>
<select ng-if="params.user != 'A' && params.user != 'B' ">
<option>-</option>
</select>
</div>
<br><br>
<div class="merge speed"><label class= 'merge'>max speed:</label></div><div class="merge"><input class="{{inputColorClass}}" ng-model="params.speed" ng-init="params.speed='200'"></div>
<br><br>
<div class="merge mile"><label>mileage:</label></div><div class="merge"><input class="{{inputColorClass}}" ng-model="params.mileage" ng-init="params.mileage='45'"></div>
</div>
</body>
</html>あなたはngのクラスを定義して、選択した入力のデータ（NG-model.length）、その後、黒そうでない場合は赤にテキスト入力を変更するためにクラスを追加しているかどうかを確認することができます。
よろしくお願いいたします。
のようなものを色を変更することができます条件に
のような：max speedでng-class="(params.user && params.car)?'valid': 'invalid'"とmileage:入力要素
<input ng-class="(params.user && params.car)?'valid': 'invalid'" ng-model="params.mileage" ng-init="params.mileage='45'">
と同様にCSSファイルでCSSクラスを追加します。
.valid {
color: black;
}
.invalid {
color: red;
}