Angular JS：ngShow沒有約束我的變化

我在這裏有一個Angular模塊在一個更大的rails項目中。我是Angular的新手，如果可以的話，希望避免使用jQuery（但是在整個rails項目中使用它並在必要時使用它）。如果結束時間爲""，我想要做的是隱藏複選框，如果結束時間中有值，則顯示覆選框。不幸的是，如果結束時間是""，我一直無法隱藏它。請參閱：Angular JS：ngShow沒有約束我的變化

enter image description here

下面你可以看到我的HTML代碼：

<div class="control-group span8"> 
     <h4 class="pull-left"><strong>Active Hours (UTC):</strong></h4> 
     </div> 
     <div class="control-group span1"> 
     <label class="control-label label-unstyled font-size-14"  for="inputStartTime">Start Time</label> 
     <div class="controls"> 
      <select ng-model="geoRegion.start_time" id="inputStartTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.start_time}}"></select> 
     </div> 
     </div> 
     <div class="control-group span1"> 
     <label class="control-label label-unstyled font-size-14" for="inputEndTime">End Time</label> 
      <div class="controls"> 
      <select ng-model="geoRegion.end_time" id="inputEndTime" class="input-small" ng-options="thisHour.value as thisHour.name for thisHour in hours" value="{{geoRegion.end_time}}"></select> 
     </div> 
     </div> 
     <div class="control-group span8"> 
        <div ng-show="clearGeoSegment(geoRegion.end_time)"><label class="inline checkbox label-unstyled font-size-14"><input type="checkbox" id="clearGeoSegment" ng-model="geoRegion.clear_segment">Clear Geo Segment at end of active time period.</label></div> 
     </div> 
     <div class="control-group span8"> 
     <p id="broadcast-notice" class="pull-left font-size-14"><strong>Note:</strong> If active hours is blank, the Geo Segment is always active.</p> 
     </div>

我的控制器代碼（是的，我用的jQuery但請建議，否則！）：

$scope.clearGeoSegment = (endTime) -> 
    if endTime is '' 
    $('#clearGeoSegment').hide() 
    else 
    $('#clearGeoSegment').show()

任何幫助將不勝感激！

來源

2014-07-10 iamryandrake

所以你不需要用jquery做隱藏/顯示。你需要綁定一個表達式，當複選框應該可見時，這個表達式就會變成真。在這種情況下，它應該如此簡單：

<div ng-show="geoRegion.end_time">

而且您可以完全刪除您的clearGeoSegment函數。

來源

2014-07-10 02:45:18

正是我想要的和按預期工作！任何有用的資源呢？我不完全清楚這個ng-show/ng-hide如何從Angular文檔中工作。謝謝彼得！ – iamryandrake

只是主要的角度文檔和教程/指南。這是一種非常不同的方法，它需要時間和大量的小型項目/實驗來挖掘如何與AngularJS協調工作。另外請注意，您可以使用'ng-if'從DOM中完全刪除/添加某些東西，我喜歡這樣做，因爲它在語義上更加正確，但'ng-show'基本上可以達到同樣的效果。 –

Angular JS：ngShow沒有約束我的變化

回答

相關問題