设置选择菜单的选定值答案

【问题标题】：Set selected value of select menus设置选择菜单的选定值
【发布时间】：2015-10-16 19:17:32
【问题描述】：

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

【问题讨论】：

你想设置下拉菜单的默认值吗？
@George Bora No. 设置选中的。像这样：MangaYurdu
你的问题不清楚..请正确地问你要做什么？
@Sarjan Desai 我想设置选择菜单的选定值。数据来自链接。例如这里是链接http://mangayurdu.com/oku/Naruto/300。我想将第一个选择菜单的选定值设置为Naruto，并将第二个选择菜单的选定值设置为300。火影忍者和 300 带有 $stateParams 和 $scope。
你小提琴里的代码不是你这里的，那是哪一个？

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

【解决方案1】：

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

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

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

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

当您从下拉列表中选择时，这不会更新 URL。

【讨论】：

在这里，先生，我终于管理了创建 plunk。你能看看吗？ http://plnkr.co/edit/foFjixSEyXtoEeP9uSHP?p=info
@Nasuh 我下载了 plunkr，它对我有用，恭喜，你想添加更多内容吗？ ps：不要叫我先生：））我没那么老
不明白你会不会帮忙？
@Nasuh 我已经更仔细地查看了您的 plunker，我正在对其进行一些更改，您在哪里设置漫画下拉菜单的选项？
在app.js 文件中。 MyCtrl.

【解决方案2】：

在您的代码中，您已多次分配 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 设置不会将选项更新为下拉菜单。

【讨论】：