如何根据给定的ngRoute选择下拉选项?

时间:2014-02-28 02:41:27

标签: angularjs

我有一个下拉列表(即html select + options)。

如果我使用“#/ make / ROLLS ROYCE /”路线重新加载页面,如何让下拉菜单预先选择“ROLLS ROYCE”选项?

var makes = ["ABARTH", "ALFA ROMEO", "ASTON MARTIN", "ROLLS ROYCE"]
var homeApp = angular.module('homeApp', ['ngRoute']);

homeApp.config(function ($interpolateProvider, $routeProvider) {
    $routeProvider.when('/Make/:make', {controller: MakeModelCtrl, template:''})
    $routeProvider.otherwise({controller: MakeModelCtrl, template:''})
});

function MakeModelCtrl($scope, $location, $routeParams) {
    console.log($scope, $location, $routeParams)
}

<form data-ng-controller="MakeModelCtrl">
<div>
    <select data-ng-model="make" data-ng-options="make for make in makes">
        <option value="">Make</option>
    </select>
</div>
</form>
<div data-ng-view></div>

使用该路线,这将填充下拉列表,控制台将显示“{make:”ROLLS ROYCE“}”的routeParam。选项值为0..n,各种名称。

如何获得与网址参数匹配的下拉选项?
我应该使用ngRoute吗?还是位置?
有更好的方法吗?

1 个答案:

答案 0 :(得分:5)

您需要注意路线更改成功事件routeChangeSuccess MakeModelCtrl

您可以根据routeparams设置您的品牌

$scope.$on('$routeChangeSuccess', function() {
       $scope.make=$routeParams.make;
});