Question

所以我有如下所示的代码。 UI允许用户选择单个日期，或选择日期范围。这些是span标签，如果toDate有日期，我会尝试添加“ - ”，否则，不显示“ - ”（短划线）。尝试了不同的变化，不知道为什么这不正常。有什么想法吗？

代码：

<span class="claimedRight" style="padding-right: 1px; display:block; width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: right; text-align: right; padding-right: 10px;">{{ item.fromDate | date: 'MM/dd/yyyy' }} <span ng-show="item.toDate.length > 0">-</span><span>{{ item.toDate | date: 'MM/dd/yyyy' }}</span></span>

Answer 1

使用CSS

<span class="dash-prefix" ng-show="item.toDate">{{ item.toDate | date: 'MM/dd/yyyy' }}</span>

和

.dash-prefix:before {
    content: " - ";
}

https://jsfiddle.net/ko771qsj/

Answer 2

ng-show="item.toDate && item.toDate.toString().length > 0"

或只使用ng-show="item.toDate"

由于Date Date长度不起作用，因此请使用string将其转换为toString，然后检查长度

var app = angular.module('app',[]);

app.controller('ctrl', function($scope){
  $scope.item = {toDate:new Date(),fromDate:new Date()};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl"><span class="claimedRight" style="padding-right: 1px; display:block; width: 175px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: left; text-align: right; padding-right: 10px;">{{ item.fromDate | date: 'MM/dd/yyyy' }} <span ng-show="item.toDate && item.toDate.toString().length > 0">-</span><span>{{ item.toDate | date: 'MM/dd/yyyy' }}</span></span></div></div>

如果2个跨度有数据，则添加字符

2 个答案: