0

I am trying to get my <select> to show every Route that is contained in the file routes.json. However, when I am using the ng-option, I can't seem to work out the correct expression to do so.

This is the data that gets loaded. I want to put the destination of that route into the select box.

loaded data

HTML:

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

Controller Code:

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

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

EDIT

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"
  }
}

EDIT 2

fileFetch method

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;
});
Marc Kline
  • 9,399
  • 1
  • 33
  • 36
user2469515
  • 373
  • 3
  • 12

1 Answers1

1

I think this does what you'd want, but check the Plunker I made to be sure:

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

To break the comprehension expression down into parts:

datum.Route (select) is what the model is populated with based on the user's selection

AS datum.Route.destination (label) sets which value the user sees

FOR datum (value) you could think of it as the iteration variable in a for/in loop... similar to the first part of an ngRoute expression

IN dataRoute (array) the source object, quite obviously

Following the use of this expression, your scope variable selectBox2 would be populated with the complete "Route" entry of the selected record because we set it (the select) as the first part of the expression. As a result, you could use interpolation for properties like {{selectBox2.destination}} in your view.

You might find this article to be helpful: Working with select using AngularJS's ng-options

Community
  • 1
  • 1
Marc Kline
  • 9,399
  • 1
  • 33
  • 36
  • Hey, thanks for the help! However it doesn't work when I am using a local JSON file, but it is working when i have the file statically inside my controller. I have posted the method which gets the data above, could it be how it is returning the data? – user2469515 May 10 '14 at 06:32
  • I can't say for sure what problem you're facing without having more detail, but I updated the Plunker so that it's using your factory (minus the $timeout which seemed unnecessary): http://plnkr.co/edit/DqCUrFbVTtI4KuyDn5Ox?p=preview – Marc Kline May 10 '14 at 06:47
  • 'data' isn't reprenseted as an array, only as an object when i debug in webstorm. It only shows one of the routes even if i add in another. – user2469515 May 10 '14 at 08:46
  • It has to do with how your data is formatted. Can you update your question to include more than one entry so I can see how a complete file would be laid out? – Marc Kline May 10 '14 at 13:42
  • Check out the .json file in this [Plunker](http://plnkr.co/edit/TNgdf9R6euFbenAg4EJR?p=preview) and let me know if it matches yours better (I bet it does). Then you can try out that expression on your side and I'll update my answer to reflect the change. – Marc Kline May 10 '14 at 14:05
  • 1
    Not sure why, but after I tried again this morning it was working. Kind of curious why it is working now, and not last night without changing anything. However, thank you very much for your help, and I have marked your response as the answer. – user2469515 May 11 '14 at 01:33