为 select 个菜单设置 selected 值

Question

我有三个相互绑定的 select 菜单，想设置两个 select 菜单的 selected 值。我要设置的值带有范围。我尝试 ng-init 但这没有用。工作 Plunker

<select ng-init="selManga=direk" ng-model="selManga" ng-options="manga.seri for manga in mangas">
    <option value="">Select a Manga</option>
</select>

<select ng-init="selChapter=bacanak" ng-show="selManga" class="browser-default" ng-model="selChapter" ng-options="+idx as chapter.klasor for (idx, chapter) in selManga.randomword">
    <option value="">Chapter</option>
</select>

<select ng-show="selManga.randomword[selChapter].yol" class="browser-default" ng-model="selPage" ng-options="+idx as (+idx + 1) for (idx, page) in selManga.randomword[selChapter].yol">
    <option value="">Page</option>
</select>

Javascript:

.controller('nbgCtrl',function  ($scope, MMG, $stateParams) {
$scope.direk = $stateParams.seri;
$scope.bacanak = $stateParams.klasor;

MMG.adlar.success(function(loHemen) {
    $scope.mangas = loHemen;
});
$scope.next = function (manga, chapter, page) {
    var nextPage = page + 1;
    if (angular.isDefined(manga.randomword[chapter].yol[nextPage])) {
        $scope.selPage = nextPage;
    } else if (angular.isDefined(manga.randomword[chapter + 1])) {
        $scope.selChapter = chapter + 1;
        $scope.selPage = 0;
    }
}
})

Answer 1

在您的代码中，您已多次分配 direk 和 bacanak 值，这可能会导致问题。只设置一次variable属性

$scope.direk = $stateParams.seri;
$scope.bacanak = $stateParams.klasor;

$scope.direk = $stateParams.xy;   //Remove if not required
$scope.bacanak = $stateParams.xz; //Remove if not required

将 $stateParams 的值设置为 selManga 而不是将其设置为 direk

$scope.selManga = $stateParams.seri;  // Set selManga from $stateParams
$scope.selChapter = $stateParams.klasor;  // Set selChapter from $stateParams

ng-init="selManga=direk" 不工作的原因是因为语法错误： ng-init="selManga=direk" 应该是 ng-init="selManga='direk'" 但是语法正确后， dropdown不会因为ng-repeat而设置。 ng-init 将值设置为模型，但在设置值时 ng-repeat 未完成选项的设置值，因此 selManga 从 ng-init 设置不更新选项到下拉列表。

Answer 2

要从 url 中提取漫画、章节和页面的值，您应该使用 $routeParams 对象，您的模块应该包含该对象 ngRoute.

我准备了一个示例 here 它可能不是很明显，但是如果您下载代码并运行在您自己的浏览器中，您可以访问 Manga/Naruto/ch/100 这样的路由url吧。

一旦你重组你的应用程序以使用路由和路由参数，在我的示例中我直接将从 url 获得的章节和页面绑定到视图，但是如果你将它们绑定到你的模型下拉菜单将更新。

$scope.params = $routeParams;
$scope.selManga = $scope.params.bookId

这不会像您从下拉列表中 select 那样更新 url。

为 select 个菜单设置 selected 值

Set selected value of select menus

javascript

angularjs

ng-options

angularjs-ng-init