Question

我正在尝试让<select>显示文件routes.json中包含的每个路由。但是，当我使用ng-option时，我似乎无法找到正确的表达式。

这是加载的数据。我想将该路线的目的地放入选择框。

loaded data

HTML ：

<label>Route: </label> <select ng-model = "selectBox2" ng-options="Route.destination for Route in data">  </select>

控制器代码：

kpsApp.controller('addMailItemController', function($scope,filefetch){
    $scope.price = 'priceless';

    filefetch.fetch().then(function(data){
        $scope.dataRoute = data;
    })
});

修改

Route.json ：

{
  "Route": {
        "objectId": "ObjectRef",
        "origin": "Sydney",
        "destination": "Rome",
        "type": "Air",
        "maxWeight":"5000",
        "maxVolume":"29000",
        "wieghtCost":"1000",
        "volumeCost":"1000",
        "duration": "18hrs",
        "frequencyOfDeparture": "2 daily",
        "day":"Thursday",
        "company":"Transport Co.",
        "weightPrice":"7", 
        "volumePrice":"5",
        "priority": "International Air"
  }
}

编辑2

fileFetch方法

kpsApp.factory('filefetch', function($q, $timeout, $http) {
    var getFile = {
        fetch: function(callback) {

            var deferred = $q.defer();

            $timeout(function() {
                $http.get('../route.json').success(function(data) {
                    deferred.resolve(data);
                });
            }, 30);
            return deferred.promise;
        }
    };
    return getFile;
});

Answer 1

我认为这可以满足您的需求，但请查看我确定的Plunker：

<select ng-init="selectBox2 = selectBox2 || dataRoute[0].Route" ng-model="selectBox2" ng-options="datum.Route as datum.Route.destination for datum in dataRoute"></select>

将理解表达式分解为部分：

datum.Route （select）是根据用户的选择填充模型的内容

AS datum.Route.destination （label）设置用户看到的值

FOR datum （value）您可以将其视为for / in循环中的迭代变量...类似于ngRoute表达式的第一部分

IN dataRoute （array）源对象，显然

使用此表达式后，您的范围变量selectBox2将填充完整的＆＃34; Route＆＃34;输入所选记录，因为我们将其设置为select）作为表达式的第一部分。因此，您可以在视图中对{{selectBox2.destination}}等属性使用插值。

您可能会发现这篇文章很有用：Working with select using AngularJS's ng-options

ng-options理解表达式不适用于我的数据

1 个答案: