个人中心
gpt4 book ai didi

javascript - 未选择下拉菜单时更改 css

转载 作者：行者123 更新时间：2023-11-28 16:31:11 24 4
gpt4 key购买 nike

谁能帮我解决这个问题。这是 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/

24 4 0
文章推荐： html - 基金会 6 : how to handle images that has an vertical overflow within one row?
文章推荐： python - 在代码中放置模运算
文章推荐： JavaScript:一页上有两个 "I agree to terms checkboxes"
文章推荐： jquery - 如何用其中的一些颜色和文本半填充菱形框？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com