javascript - Angular : function triggers twice on ng-change while selecting any option from dropdown

Question

实际上我是 angularjs 的新手，我面临着让我很困惑的问题。我已经编写了 angularjs Controller ，它在下拉菜单中填充数据并选择每个选项，它应该在 map 上显示特定位置。为了触发事件，我使用了 ng-change。

我的 HTML View 看起来像，

<select name="DeviceList" ng-model="deviceList" ng-change="filterMarkers()">
                                        <option value="0" selected="selected">All</option>
                                        <option ng-repeat="device in data" value="{{device.id}}">{{device.name}}</option>
                                </select>

JSON 对象看起来像，

[{
"id": 1,
"name": "MacVend1001",
"latitude": "12.9383145",
"longitude": "77.57274628",
"status": "ON",
"failureMessage": null,
"healthIndex": [{
    "Parameter": "Voltage",
    "value": "29",
    "y-axis": [244, 124, 226, 372, 180, 290, 135, 350, 175, 145],
    "x-axis": ["2016-01-01 13:49:32", "2016-01-02 13:48:43", "2016-01-03 13:48:43", "2016-01-04 13:48:43", "2016-01-05 13:49:32", "2016-01-06 13:48:43", "2016-01-07 13:48:43", "2016-01-08 13:48:43", "2016-01-09 13:48:43", "2016-01-10 13:48:43"],
    "chart-type": "Trend"
}, {
    "Parameter": "Internal Temprature",
    "value": "30",
    "y-axis": [44, 24, 26, 72, 80, 90, 35, 50, 75, 45],
    "x-axis": ["2016-01-01 13:49:32", "2016-01-02 13:48:43", "2016-01-03 13:48:43", "2016-01-04 13:48:43", "2016-01-05 13:49:32", "2016-01-06 13:48:43", "2016-01-07 13:48:43", "2016-01-08 13:48:43", "2016-01-09 13:48:43", "2016-01-10 13:48:43"],
    "chart-type": "Trend"
}, {
    "Parameter": "External Temprature",
    "value": "45",
    "y-axis": [144, 224, 126, 372, 180, 2940, 1355, 250, 175, 345],
    "x-axis": ["2016-01-01 13:49:32", "2016-01-02 13:48:43", "2016-01-03 13:48:43", "2016-01-04 13:48:43", "2016-01-05 13:49:32", "2016-01-06 13:48:43", "2016-01-07 13:48:43", "2016-01-08 13:48:43", "2016-01-09 13:48:43", "2016-01-10 13:48:43"],
    "chart-type": "Trend"
}]

}]

最后 Controller 来了，

angular.module('mapsApp', [])
.controller('NewMapCtrl', function ($scope,$http) {
    $scope.data=[];
    $http({method:'GET',url: 'https://korbsbvm130.apac.bosch.com:8244/intelrfc/1.0/devicelist'}).success(function(API_RESPONSE){
        $scope.data=API_RESPONSE;
        $scope.devicelist=0;
    });

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40.0000, -98.0000),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    $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.city,
            Name:info.name
        });
        marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div><div class="infoWindowContent">' + info.name + '</div>';

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

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

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

    $scope.clearMarkers = function() {
      for (var i = 0; i < $scope.markers.length; i++) {
        $scope.markers[i].setMap(null);
      }
      $scope.markers.length = 0;
    }



    $scope.filterMarkers = function() {
       //1.select filtered cities
       var devicesData;
       var deviceName = $scope.deviceList;
       if(deviceName == '0') {
          devicesData = $scope.data;
       }
       else {
          devicesData = $scope.data.filter(function(c){
              alert("C.id="+c.id)
            if(c.id == deviceName)
               return c; 
          });
       }  
       //2.update markers on map
       $scope.clearMarkers();
       for (i = 0; i < devicesData.length; i++) {
        createMarker(devicesData[i]);
       }
    }

});

现在的问题是，每当我从填充的下拉列表中单击任何选项时，它都会调用 filtermarkers() 函数两次，但通常它不应该调用。请分享您对如何摆脱它的想法。

它还在填充的下拉列表中显示了两个空选项。

Answer 1

您可能只是没有正确配置 select 指令。我不记得在 select 指令中看到 value 属性。这是一个显示简单使用的 plunker，配置为在选择更改时调用函数。

https://plnkr.co/edit/zOZ9Tqv4r5rYPXTNyICx?p=preview

标记:

  <body ng-app="myApp">
    <div ng-controller="myController">
      <select ng-model="selectedOption" ng-change="someFunction()">
        <option ng-repeat="device in someArray">{{device.name}}</option>
      </select>
    </div>
  </body

希望这对您有所帮助。