Question

我是AngularJS的新手。我决定使用我的标记（我定义的）创建自定义地图。所以，我创建了一个只有一个数组的javascript文件：

var myMarkers=[{
   method1='..',
   methode2='..'
 },{
   method1='..',
   methode2='..'
}]

然后，我创建了一个app.s文件，它是一个AngularJS指令来创建地图

angular.module('myApp', []).
directive('myMap', function() {
   var link = function(scope, element, attrs) {
       function initMap(){..};   
       function setMarker(map, position, title, content,link){..};
       function returnMarker(){..};
   }
   return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
});

在我的index.html中，

<html ng-app="myApp">
<head>...</head>
<body>
<div my-map=""></div>
</body>
</html>

它工作正常，但我想添加一个研究功能来找到一个标记，然后将地图居中放在这个标记上。像这样：

<input type="search" placeholder="Search your place" ng-model='search'></input>
<p ng-repeat="marker in myMarkers| filter: search> {{marker.title}}</p>

提前感谢您的任何帮助

Answer 1

我相信你要求三件事：1）从控制器中的另一个文件访问一个数组。 2）对标记进行过滤/搜索。 3）如何在标记上居中地图。

要将阵列存储在另一个文件中并在控制器中访问它，请执行以下操作：

- mymarkers.js

var app = angular.module('myApp');
app.constant("myMarkers", [{
   method1='..',
   methode2='..'
 },{
   method1='..',
   methode2='..'
}]);

- app.js文件

var app = angular.module('myApp', []);
angular.module('myApp').controller("myController", ["$scope", "myMarkers", function($scope, myMarkers){
    $scope.markers= myMarkers; 
    $scope.searchMarkers = function(){
// loop through your markers array and compare with the entered value in text box.
    }
}]);

app.directive('myMap', function() {
   var link = function(scope, element, attrs) {
       function initMap(){..};   
       function setMarker(map, position, title, content,link){..};
       function returnMarker(){..};
   }
   return {
        restrict: 'A',
        template: '<div id="gmaps"></div>',
        replace: true,
        link: link
    };
});

app.filter('marksersFilter', function () {
        return function (objects, markerObj) {
            if (!objects)
                return [];
            else if (!(markerObj))
                return objects;
            else {
                var result = [];
                for (var i = 0; i < objects.length; i++) {
                    // do comparision here, if found push object to result array
                            result.push(objects[i]);                        
                }
                return result;
            }
        }
    });

- index.html

<html ng-app="myApp" ng-controller="myController">
<head>...</head>
<body>
   <input type="search" ng-change="searchMarkers()" placeholder="Search your place" ng-model='search'></input>
<p ng-repeat="marker in myMarkers| marksersFilter: search"> {{marker.title}}</p>

<div my-map=""></div>
</body>
</html>

我希望这回答了你如何“使用Angular搜索另一个JS文件数组中的项目”的问题。

在另一个Javascript文件的数组中搜索项目（使用AngularJS）

1 个答案: