Question

我是这个角度js的新手。在我的代码中，下拉控件已经加载了一些项目，我知道这个列表应该从xml文件加载。我想知道在何处/如何编码以加载数据。检查此代码并帮助我......

<select size="10" ng-model="model.addSelection" ng-options="a.name for a in availableList |         availableList | propertyFilter:model.availableFilter" class="listBoxStyle" wat-focus/>


angular.module('readbackSelectModule', [])
.filter('availableList', [
    function () {
        return function (input) {
            if (!angular.isArray(input)) return input;
            var out = [];
            for (var i = 0; i < input.length; i++) {
                if (input[i].visible == true)
                    out.push(input[i]);
            }
            return out;
        }
    }
])
.filter('plotList', [
        function () {
            return function (input) {
                if (!angular.isArray(input)) return input;
                var out = [];
                for (var i = 0; i < input.length; i++) {
                    if (input[i].visible == false)
                        out.push(input[i]);
                }
                return out;
            }
        }
])
.controller('readbackSelectCtrl', ['$scope', '$modalInstance', 'generalDataService', 'keyService', 'propertyFilterFilter', 'availableListFilter', 'plotListFilter', 'plotPanelService',
    function ($scope, $modalInstance, generalDataService, keyService, propertyFilterFilter, availableListFilter, plotListFilter, plotPanelService) {

        var CANCEL_MESSAGE = 'cancel';
        var GET_DATA_MESSAGE = 'getdata';
        var REQUEST_PROPERTY_LIST_MESSAGE = 'requestplotdata';
        var SUBSCRIBE = 'plotsubscribe';
        var UNSUBSCRIBE = 'plotunsubscribe';
        var STREAM_TYPE = '4';

        $scope.model = {};
        $scope.model.addSelection;
        $scope.model.removeSelection;
        $scope.model.availableFilter;

        // List of properties
        $scope.availableList = [];            

        };

Answer 1

使用Angular的$http服务。

您可以在readbackSelectCtrl中执行此操作，如下所示：

...
$scope.model = {};
$scope.model.addSelection;
$scope.model.removeSelection;
$scope.model.availableFilter;

$http.get(/** insert XML file URL here **/)
  .success(function(data) {
    // process the data and extract the XML elements you want
    $scope.availableList = xmlExtractedArray;
  })
  .error(function(err) {
    // handle error
  });

点击 plunker 查看有效的演示。

将数据加载到angularjs中的下拉列表

1 个答案: