Question

有人可以帮我解决这个问题。这是掠夺者。

http://plnkr.co/edit/M3rJYnqhODRapXBBI6Ck?p=preview

如图所示，我有日期，用户，车辆，速度和里程作为输入字段。

我希望里程和速度的输入值最初的文字颜色为红色。只有当我选择用户和汽车的下拉值时，文本颜色才会变为黑色。

有人可以建议吗？

<html>
</html>

Answer 1

您最初可以将输入文字颜色设置为红色，然后选择选项更改将颜色更改为黑色，类似这样

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>

Answer 2

您可以使用ng-class根据条件设置特定类

喜欢ng-class="(params.user && params.car)?'valid': 'invalid'"中的max speed和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;
}

Answer 3

您可以定义ng-class并检查选择输入是否有数据（ng-model.length）然后添加一个类以将文本输入更改为黑色，否则为红色。

问候！

未选择下拉列表时更改css

3 个答案: