Açılır menü seçilmediğinde css değiştir

-1

Birisi bana yardımcı olabilir. İşte plunker. plunker gösterildiği gibiAçılır menü seçilmediğinde css değiştir

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

i giriş alanları olarak tarih, kullanıcı, araba, hız ve kilometre var.

Giriş ve çıkış hız değerlerinin başlangıçta metin rengi olarak kırmızı olmasını istiyorum. Sadece kullanıcı ve araç için açılır menü değerini seçtiğimde, metin rengi daha sonra siyah olarak değişmelidir.

Birisi önerebilir mi?

<html> 
</html>

kaynak

2016-04-12 Patrick

belirli sınıf temelli ayarlamak için ng-class kullanabilirsiniz, siyah geri bu

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>

kaynak

2016-04-12 19:50:58 pradeep1991singh

Bir ng sınıf tanımlamak basıp girdi verilerini varsa (ng-model.length) kontrol edebilirsiniz sonra siyah aksi kırmızıya metin girişi değiştirmek için bir sınıf ekleyin.

Saygılar!

Başlangıçta seçme seçeneği değişiklikleri daha sonra kırmızıya giriş metin rengini ayarlayabilir ve

kaynak

2016-04-12 19:43:23

gibi bir şey rengini değiştirmek

gibi: max speed ve mileage: gibi giriş öğeleri

<input ng-class="(params.user && params.car)?'valid': 'invalid'" ng-model="params.mileage" ng-init="params.mileage='45'">

ve benzeri css dosyasında css sınıfını ekleyin:

.valid { 
    color: black; 
} 
.invalid { 
    color: red; 
}

kaynak

2016-04-12 19:53:20

Açılır menü seçilmediğinde css değiştir

cevap

İlgili konular