谁能帮我解决这个问题。这是 plunker。
http://plnkr.co/edit/M3rJYnqhODRapXBBI6Ck?p=preview
如 plunker 所示，我有日期、用户、汽车、速度和里程作为输入字段。
我希望里程和速度的输入值最初的文本颜色为红色。只有当我为用户和汽车选择下拉值时，文本颜色才应更改为黑色。
有人可以推荐吗？
<html>
</html>
最佳答案
您可以最初将输入文本颜色设置为红色，然后在选择选项更改时将颜色更改回黑色，就像这样
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>关于javascript - 未选择下拉菜单时更改 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36582515/