Angularjs 过滤器页面第一次加载 [英] Angularjs filter page loads first time
问题描述
项目完成时出现了最后一个问题.第一次加载页面时如何避免过滤.
例如:打开电视时选中的页面?(ng-checked="true") 其他便利是假的.如果访客解除电视签到,则过滤器更新.
我的项目:fiddle
angular.module('hotelApp', []).controller('ContentControler', function ($scope, $timeout) {var mapOptions = {缩放:2,中心:新的 google.maps.LatLng(40.0000, -98.0000),mapTypeId: google.maps.MapTypeId.TERRAIN}$scope.location_name = "";$scope.names = [{prop_Name: '位置 1',纬度:43.7000,长:-79.4000,便利设施:'3'}, {prop_Name: '位置 2',纬度:40.6700,长:-73.9400,便利设施:'2'}, {prop_Name: '位置 3',纬度:41.8819,长:-87.6278,便利设施:'4'}, {prop_Name: '位置 4',纬度:34.0500,长:-118.2500,便利设施:'1, 2'}, {prop_Name: '位置 5',纬度:36.0800,长:-115.1522,便利设施:'2, 3'}];$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);$scope.markers = [];var infoWindow = new google.maps.InfoWindow();var createMarker = 函数(信息){var 标记 = 新的 google.maps.Marker({地图:$scope.map,位置:新 google.maps.LatLng(info.lat, info.long),标题:info.prop_Name});marker.content = '<div class="infoWindowContent"><ul>'+ ''+ info.prop_Desc + ' '+ ''+ info.prop_Addr + '</li>'+ ' '+ info.prop_Price + '</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, 标记);});$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');}//这里是问题过滤器$scope.am_en = function(){x = $(".hosting_amenities input:checkbox:checked").map(function(){return $(this).val();}).get();$scope.ot_Filter = 函数(位置){var shouldBeShown = true;for (var i = 0; i < x.length; i++) {if (location.amenities.indexOf(x[i]) === -1) {shouldBeShown = 假;休息;}}返回 shouldBeShown;};}$scope.$watch('nas',函数(新值,旧值){for (jdx in $scope.markers) {$scope.markers[jdx].setMap(null);}$scope.markers = [];for ($scope.nas 中的 idx) {createMarker($scope.nas[idx]);}}, 真的);});
#map {高度:220px;宽度:400px;}.infoWindowContent {字体大小:14px !重要;边框顶部:1px 实心 #ccc;填充顶部:10px;}h2{底边距:0;边距顶部:0;}#total_items{边距:0px 自动;填充:0px;文本对齐:居中;颜色:#0B173B;边距顶部:50px;边框:2px 虚线 #013ADF;字体大小:20px;宽度:200px;高度:50px;行高:50px;字体粗细:粗体;}#数量{颜色:#DF7401;字体大小:18px;字体粗细:粗体;}#slider-range{边距:0px 自动;填充:0px;文字对齐:居中;宽度:500px;}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="样式表"/><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="地图"></div><div id="class" ng-repeat="标记中的标记"></div><ul><li ng-repeat="x in nas = (names | filter:ot_Filter)">{{ x.prop_Name }}</li><div class="hosting_amenities"><h3>过滤器:</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">有线电视<input type="checkbox" name="more_filter[]" value="4" ng-checked="false">Klima<button ng-click="am_en();">提交</button>
目前,您只能在按下提交"按钮后才能更改过滤器.但是,我建议您删除它,并将函数 ot_Filter
放在单击它时触发的函数之外.这将使加载页面时的初始过滤成为可能.
作为下一步,我将使用 ng-model
而不是 ng-checked
:
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']">有线电视<input type="checkbox" name="more_filter[]" value="4" ng-model="ot_Checkboxes['klima']">Klima
属性将在您的 javascript 中初始化:
$scope.ot_Checkboxes = {'wifi':假,'电视':真的,'有线电视':假,'klima': 假};
通过这些更改,您的代码将自动更新您的位置.这是一个很好的做法,您可以很好地控制您的元素.您可以在这个答案
中找到有关如何正确设置的更多信息为了让您看到它的样子,我修改了您的小提琴 此处
There was a final problem when the project finished. How to avoid filtering when page loads first time.
For example : Opening page with TV checked ? (ng-checked="true") Other amenities is false. If the visitor lifts the tv checkin, the filter is renewed.
My project : 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) {
var shouldBeShown = true;
for (var i = 0; i < x.length; i++) {
if (location.amenities.indexOf(x[i]) === -1) {
shouldBeShown = false;
break;
}
}
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
{
margin:0px auto;
padding:0px;
text-align:center;
color:#0B173B;
margin-top:50px;
border:2px dashed #013ADF;
font-size:20px;
width:200px;
height:50px;
line-height:50px;
font-weight:bold;
}
#amount
{
color:#DF7401;
font-size:18px;
font-weight:bold;
}
#slider-range
{
margin:0px auto;
padding:0px;
text-align:center;
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>
Currently, you only change the filter once you press the button Submit. However, I recommend you to remove that and place the function ot_Filter
outside of the function triggered when you click it. This will make the initial filtering when you load the page possible.
As the next step, I would use ng-model
instead of 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
The properties would be initialized in your javascript:
$scope.ot_Checkboxes = {
'wifi': false,
'tv': true,
'cableTV': false,
'klima': false
};
With these changes your code will update your locations automatically. This is a good practice and you can keep a good control of your elements. You will find more information about how to set this properly in this answer
In order for you to see how it looks like, I modified your fiddle here
这篇关于Angularjs 过滤器页面第一次加载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!