How to load template from dropdown menu Angular

Question

I am fairly new to angular and am working with a client that wants a dropdown allowing users to select their neighborhood which is then saved in a cookie to load upon return. I am able to save cookie but am having trouble getting dropdown selected neighborhood to load proper template.

Here is the html:

<select id="mNeighborhood" ng-model="mNeighborhood" ng-options="neighborhood.id as neighborhood.name for neighborhood in neighborhoods" ng-change="saveCookie()"></select>

And then, I have added the following in html:

<div ng-view=""></div>

Here is the app.js code:

var app = angular.module('uSarasota', ['ngCookies', 'ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider
        .when('/', {
            template: '<div><h1 style="margin: 200px;">This is our main page</h1></div>'
        })
        .when('/downtown', {
            templateUrl: "templates/downtown.html"
        })
        .otherwise({
            template: '<div><h1 style="margin: 200px;""><strong>NOTHING TO SEE HERE</strong></h1></div>'
        })
});

//Select Neighborhood
app.controller('myNeighborhood', ['$scope', '$cookies', function($scope, $cookies) {
    $scope.neighborhoods = [{
        name: "My Neighborhood",
        id: 0
    }, {
        name: "All of Sarasota",
        id: 1
    }, {
        name: "Downtown",
        url: "/downtown",
        id: 2,
    }, {
        name: "North Sarasota",
        id: 3
    }, {
        name: "Lakewood Ranch",
        id: 4
    }, {
        name: "Longboat Key",
        id: 5
    }, {
        name: "St. Armands Circle",
        id: 6
    }, {
        name: "Southside Village",
        id: 7
    }, {
        name: "Siesta Key",
        id: 8
    }, {
        name: "Gulf Gate",
        id: 9
    }];

//Set Cookie so when user returns to site, it will be on their neighborhood
    $scope.mNeighborhood = parseInt($cookies.get('sNeighborhood')) || 0;
    $scope.saveCookie = function() {
        $cookies.put('sNeighborhood', $scope.mNeighborhood);
    };
}]);

This all works fine to save and load user selection, but am having trouble finding solution to get template based on selection. So, should I add url to the array for each neighborhood and if so, how do I get the link?

Answer 1

Basically you need to change the URL programatically on selection of dropdown. For achieving this thing you need to first change you ng-options to return object on selection. And then using that object get url property from it to load particular template.

Markup

<select id="mNeighborhood" 
   ng-model="mNeighborhood" 
   ng-options="neighborhood.name for neighborhood in neighborhoods" 
   ng-change="saveCookie()">
</select>

Code

$scope.saveCookie = function() {
    var mNeighborhood = $scope.mNeighborhood;
    $cookies.put('sNeighborhood', mNeighborhood.id);
    //do add $location dependency in controller function before using it.
    $location.path(mNeighborhood.url);
};

Update

On initial Load the value should be set as object as per new implementation.

$scope.mNeighborhood = {}; //at the starting of controller

//the other code as is

//below code will get the object from the neighborhoods array.
$scope.mNeighborhood = $filter('filter')($scope.neighborhoods, parseInt($cookies.get('sNeighborhood')) || 0, true)[0];
$scope.saveCookie = function() {
    var mNeighborhood = $scope.mNeighborhood;
    $cookies.put('sNeighborhood', mNeighborhood.id);
    //do add $location dependency in controller function before using it.
    $location.path(mNeighborhood.url);
};