Angularjs篩選器首次加載頁面

Question

項目完成時存在最終的問題。如何在第一次加載頁面時避免過濾。

例如：打開頁面，檢查電視？ （ng-checked =「true」）其他設施是假的。如果訪客提起電視登記，過濾器將被更新。

我的項目：fiddle

angular.module('hotelApp', []) 
 
    .controller('ContentControler', function ($scope, $timeout) { 
 

 
    var mapOptions = { 
 
     zoom: 2, 
 
     center: new google.maps.LatLng(40.0000, -98.0000), 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    } 
 
    $scope.location_name = ""; 
 
    $scope.names = [{ 
 
     prop_Name: 'Location 1', 
 
     lat: 43.7000, 
 
     long: -79.4000, 
 
     amenities: '3' 
 
    }, { 
 
     prop_Name: 'Location 2', 
 
     lat: 40.6700, 
 
     long: -73.9400, 
 
     amenities: '2' 
 
    }, { 
 
     prop_Name: 'Location 3', 
 
     lat: 41.8819, 
 
     long: -87.6278, 
 
     amenities: '4' 
 
    }, { 
 
     prop_Name: 'Location 4', 
 
     lat: 34.0500, 
 
     long: -118.2500, 
 
     amenities: '1, 2' 
 
    }, { 
 
     prop_Name: 'Location 5', 
 
     lat: 36.0800, 
 
     long: -115.1522, 
 
     amenities: '2, 3' 
 
    }]; 
 
    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    $scope.markers = []; 
 

 
    var infoWindow = new google.maps.InfoWindow(); 
 

 
    var createMarker = function (info) { 
 

 
     var marker = new google.maps.Marker({ 
 
      map: $scope.map, 
 
      position: new google.maps.LatLng(info.lat, info.long), 
 
      title: info.prop_Name 
 
     }); 
 
     marker.content = '<div class="infoWindowContent"><ul>' + '<li>' + info.prop_Desc + '</li>' + '<li>' + info.prop_Addr + '</li>' + '<li>' + info.prop_Price + '</li>' + '<li>' + info.prop_Dist + '</li>' + '</ul></div>'; 
 

 
     google.maps.event.addListener(marker, 'click', function() { 
 
      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
 
      infoWindow.open($scope.map, marker); 
 
     }); 
 

 
     $scope.markers.push(marker); 
 

 
    } 
 

 
    for (i = 0; i < $scope.names.length; i++) { 
 
     createMarker($scope.names[i]); 
 
    } 
 

 
    $scope.openInfoWindow = function (e, selectedMarker) { 
 
     e.preventDefault(); 
 
     google.maps.event.trigger(selectedMarker, 'click'); 
 
    } 
 

 
//PROBLEM FILTER HERE 
 
$scope.am_en = function() 
 
{ 
 
    x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get(); 
 
    $scope.ot_Filter = function (location) { 
 
    \t var shouldBeShown = true; 
 
    \t for (var i = 0; i < x.length; i++) { 
 
    \t \t if (location.amenities.indexOf(x[i]) === -1) { 
 
     \t \t shouldBeShown = false; 
 
      break; 
 
     } 
 
    } 
 
    \t return shouldBeShown; 
 
    }; 
 
} 
 

 

 

 
    $scope.$watch('nas', 
 
    function (newValue, oldValue) { 
 
     for (jdx in $scope.markers) { 
 
      $scope.markers[jdx].setMap(null); 
 
     } 
 
     $scope.markers = []; 
 
     for (idx in $scope.nas) { 
 
      createMarker($scope.nas[idx]); 
 
     } 
 
    }, true); 
 
});

#map { 
 
    height: 220px; 
 
    width: 400px; 
 
} 
 

 
.infoWindowContent { 
 
    font-size: 14px !important; 
 
    border-top: 1px solid #ccc; 
 
    padding-top: 10px; 
 
} 
 

 
h2 { 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
} 
 
#total_items 
 
{ 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
\t text-align:center; 
 
\t color:#0B173B; 
 
\t margin-top:50px; 
 
\t border:2px dashed #013ADF; 
 
\t font-size:20px; 
 
\t width:200px; 
 
\t height:50px; 
 
\t line-height:50px; 
 
\t font-weight:bold; 
 
} 
 
#amount 
 
{ 
 
\t color:#DF7401; 
 
\t font-size:18px; 
 
\t font-weight:bold; 
 
} 
 
#slider-range 
 
{ 
 
\t margin:0px auto; 
 
\t padding:0px; 
 
\t text-align:center; 
 
\t width:500px; 
 
}

<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script> 
 
<div ng-app="hotelApp" ng-controller="ContentControler"> 
 
<div id="map"></div> 
 
    <div id="class" ng-repeat="marker in markers"></div> 
 
    <ul> 
 
     <li ng-repeat="x in nas = (names | filter:ot_Filter)">{{ x.prop_Name }}</li> 
 
    </ul> 
 
    
 
    
 
<div class="hosting_amenities"> 
 
<h3>Filter:</h3> 
 
<input type="checkbox" name="more_filter[]" value="1" ng-checked="false">WIFI 
 
<input type="checkbox" name="more_filter[]" value="2" ng-checked="true">TV 
 
<input type="checkbox" name="more_filter[]" value="3" ng-checked="false">Cable TV 
 
<input type="checkbox" name="more_filter[]" value="4" ng-checked="false">Klima 
 
<button ng-click="am_en();">Submit</button> 
 
</div>

Answer 1

目前，你只當你按下按鈕提交更換過濾器。不過，我建議您將其刪除，並將函數ot_Filter放在您單擊時觸發的函數外部。這會在您加載頁面時進行初始過濾。

至於下一步，我會用ng-model，而不是ng-checked：

<input type="checkbox" name="more_filter[]" value="1" ng-model="ot_Checkboxes['wifi']">WIFI 
<input type="checkbox" name="more_filter[]" value="2" ng-model="ot_Checkboxes['tv']">TV 
<input type="checkbox" name="more_filter[]" value="3" ng-model="ot_Checkboxes['cableTV']">Cable TV 
<input type="checkbox" name="more_filter[]" value="4" ng-model="ot_Checkboxes['klima']">Klima 

的屬性會在你的JavaScript進行初始化：

$scope.ot_Checkboxes = { 
    'wifi': false, 
    'tv': true, 
    'cableTV': false, 
    'klima': false 
}; 

有了這些改變你的代碼將會自動更新您的位置。這是一個很好的做法，你可以保持對你的元素的良好控制。你會發現有關如何在this answer

正確設置這是爲了讓你看到它的模樣瞭解更多信息，我修改你的小提琴here