设置选择菜单的选定值

时间:2015-10-16 09:15:06

标签: javascript angularjs ng-options angularjs-ng-init

我有三个相互绑定的选择菜单,想要设置两个选择菜单的选定值。我想要设置的值带有范围。我尝试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;
    }
}
})

2 个答案:

答案 0 :(得分:1)

在您的代码中,您已将direkbacanak值分配多次,这可能会导致问题。仅设置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

selManga设置$stateParams值,而不是将其设置为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时未完成选项的设置值,因此{ng}从not-update not update选项设置为下拉列表。

答案 1 :(得分:1)

要从网址中提取漫画,章节和页面的值,您应使用$routeParams对象,模块应包含ngRoute

我准备了一个示例here,但这可能并不明显,但如果您下载代码并在自己的浏览器中运行,则可以从网址栏访问Manga/Naruto/ch/100等路由。

一旦你重新构建你的应用程序以使用routes和routeParams,在我的例子中,我直接将我从URL获取的章节和页面绑定到视图,但如果你将它们绑定到你的下拉列表的模型,下拉列表将会更新。

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

当您从下拉列表中选择时,这不会更新网址。