如何从下拉菜单Angular加载模板

Question

我是一个相当新的角度，我正在与一个想要下拉列表的客户合作，允许用户选择他们的邻居，然后保存在cookie中以便在返回时加载。 我能够保存cookie，但我无法在下拉选择邻域加载适当的模板。

这是html：

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

然后，我在html中添加了以下内容：

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

这是app.js代码：

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);
    };
}]);

这一切都可以很好地保存和加载用户选择，但是很难找到解决方案来根据选择获取模板。 那么，我应该为每个邻域的数组添加url，如果是，我该如何获取链接？

Answer 1

基本上，您需要在选择下拉列表时以编程方式更改URL。 为了实现这一点，您需要首先更改ng-options以在选择时返回对象。 然后使用该对象从中获取url属性以加载特定模板。

标记

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

码

$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);
};

更新

在初始加载时，应根据新实现将值设置为对象。

$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);
};