Question

我正在使用的应用程序在一个单独的html文件中定义了一个日期选择器。这是日期选择器的定义：

<span class="input-group">
  <input type="text" class="form-control" datepicker-popup="MM/dd/yyyy" ng-model="model" min-date="minimum" 
         is-open="opened" datepicker-options="datepickerOptions" date-disabled="notused" close-text="Close"/>
  <span class="input-group-btn">
    <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
  </span>
</span>

此日期选择器在整个应用程序中的多个位置使用。有些实例是必需的，有些则不是。有一些css类用于显示输入何时需要且有效。定义适用于input和select。这是css类：

input.requiredField.ng-valid {
  border: 1px solid #449d44;
  box-shadow: 0px 0px 2px #449d44;
}

input.requiredField.ng-invalid {
  border: 1px solid #A33441;
  box-shadow: 0px 0px 2px #A33441;
}
select.requiredField.ng-invalid {
  border: 1px solid #A33441;
  box-shadow: 0px 0px 2px #A33441;
}

select.requiredField.ng-valid {
  border: 1px solid #449d44;
  box-shadow: 0px 0px 2px #449d44;
}

我无法将css添加到日期选择器以显示日期选择器是必需的。

这是我正在使用的2个日期选择器：

<div class="row">
<div class="col-md-6">
   <label id="startDateLabel" style="margin: 25px;">Start Date:</label>
   <date-picker id="startDatePicker" type="text" model="updateWrhParams.startDate" ng-required="updateWrhParams.startDateRequired"
style="margin-top: 25px; margin-bottom: 25px; margin-right: 70px; float: right;">
</date-picker>      
</div>
<div class="col-md-6">                  
  <label id="endDateLabel"  style="margin: 25px;">End Date:</label>
  <date-picker id="endDatePicker" type="text" model="updateWrhParams.endDate"  ng-required="updateWrhParams.endDateRequired"
style="margin-top: 25px; margin-bottom: 25px; margin-right: 70px; float: right;">
</date-picker>
</div>
</div>

<button type="button" id="updateBtnWrh" class="btn btn-success" style="margin-left: 80%; background-color: #41a334;" ng-disabled="updateWarehouseForm.$invalid" ng-click="updateWrh()">Update</button>

我在控制器中将ng-required值设置为true：

$scope.updateWrhParams.startDateRequired = true;
$scope.updateWrhParams.endDateRequired = true;

如何根据需要添加使用.css类定义日期选择器？此外，当输入为空时，日期选择器无效？当输入无效日期时，该按钮将被正确禁用。但最初，按钮已启用。

我正在使用angularjs 1.4。

Answer 1

我将假设css正确加载。您的代码似乎一切都很好。只缺少ng-class指令才能生效。 reference

当表达式为true

时，这将添加所需的类

angular.module('myApp', []).controller('MyCtrl', function($scope) {
  $scope.startDateRequired = true;
  $scope.endDateRequired = false;
  $scope.model = {};
});

input.requiredField.ng-valid {
  border: 1px solid #449d44;
  box-shadow: 0px 0px 2px #449d44;
}

input.requiredField.ng-invalid {
  border: 1px solid #A33441;
  box-shadow: 0px 0px 2px #A33441;
}

select.requiredField.ng-invalid {
  border: 1px solid #A33441;
  box-shadow: 0px 0px 2px #A33441;
}

select.requiredField.ng-valid {
  border: 1px solid #449d44;
  box-shadow: 0px 0px 2px #449d44;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app='myApp'>
  <div ng-controller="MyCtrl">
 <form>
 
  <input 
  type="text"
  ng-model="model.start"
  class="form-control" ng-required="startDateRequired"
  ng-class="startDateRequired == true ? 'requiredField':''"
  />
  
   <input 
  type="text"  ng-model="model.end"
  class="form-control"  ng-required="endDateRequired"
  ng-class="endDateRequired == true ? 'requiredField':''"
  />
</form>
  </div>
</body>

告诉我们。

将html元素定义为必需输入

1 个答案: