2スパンにデータがある場合は文字が追加されます

Question

以下のコードがあります。 UIにより、ユーザーは単一の日付を選択したり、日付範囲を選択することができます。これらはスパンタグにあり、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

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

またはちょうどDateのでng-show="item.toDate"

を使用するには、Date長さがそうtoStringを使用してstringに変換して、長さ

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>

Answer 2

使用CSS

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

と

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

https://jsfiddle.net/ko771qsj/