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

Question

我对 Angular 还很陌生，并且正在与一个客户合作，该客户需要一个下拉菜单，允许用户选择他们的社区，然后将其保存在 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);
};