Set selected value of select menus

Question

I have three select menu that bind to each other and want to set selected value of two select menus. Value that I want to set comes with scope. I try ng-init but that didn't work. Working 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. Set the selected ones. Like this: [MangaYurdu](http://mangayurdu.com/oku/One_Piece/803) — Nasuh, Oct 16 '15 at 09:23
Your question is not clear..Please ask properly what you are trying to do? — Sarjan Desai, Oct 16 '15 at 09:25
@Sarjan Desai I want to set selected values of select menus. Data comes from links. For example here is link `http://mangayurdu.com/oku/Naruto/300`. I want to set selected value of first select menu to `Naruto` and selected value of second select menu `300`. Naruto and 300 comes with $stateParams and the then $scope. — Nasuh, Oct 16 '15 at 09:29
the code in your fiddle is not what you have here, so which one is it? — Jax, Oct 16 '15 at 09:53
@Nasuh I got it now, what you're saying you want to extract the manga/chapter/page from the url, Do you also want using the dropdowns to change the url ? — George Bora, Oct 16 '15 at 09:53
@George Bora Yes if that possible it would be nice that dropdown changes the url. I didnt thought of that much. — Nasuh, Oct 16 '15 at 09:57

Sarjan Desai · Answer 1 · 2015-10-16T10:20:16.203

In your code you have assign direk and bacanak value more than one times which can cause issue. Set variable property only once.

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

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

Set selManga value from $stateParams instead of setting it to direk

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

The reason why ng-init="selManga=direk" not work is because Syntax error: ng-init="selManga=direk" should be ng-init="selManga='direk'" but after making syntax correct, dropdown will not set because of ng-repeat. ng-init set value to model but at time of setting value ng-repeat doesn't complete setting value for options so selManga set from ng-init not update option to dropdown.

score 1 · Accepted Answer · answered Oct 16 '15 at 10:46

1

To extract the values for the manga,chapter and page from the url you should use the $routeParams object, which your module should include ngRoute.

I've prepared an example here it might not be obvious but if you download the code and run it in your own browser you can access routes like Manga/Naruto/ch/100 from the url bar.

Once you've restructured your application to use routes and routeParams, in my example I directly bind the chapter and page I get from the url to the view but if you bind them to the models of your dropdowns the dropdowns will update.

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

This does not update the url as you select from the dropdown.

answered Oct 16 '15 at 10:46

George Bora

1,618
6
26
45

Here sir, I finally manage the create plunk. Could you look at it please? [http://plnkr.co/edit/foFjixSEyXtoEeP9uSHP?p=info](http://plnkr.co/edit/foFjixSEyXtoEeP9uSHP?p=info) – Nasuh Oct 16 '15 at 11:05
@Nasuh I downloaded the plunkr and it worked for me, congratulations, do you want to add something more ? ps: don't call me sir :)) I'm not that old – George Bora Oct 16 '15 at 11:47
Dont understand you will help or not? – Nasuh Oct 16 '15 at 11:49
@Nasuh I've looked more closely at your plunker, and I'm changing it a little, where do you set the options for the manga dropdown ? – George Bora Oct 16 '15 at 12:15
In the `app.js` file. `MyCtrl`. – Nasuh Oct 16 '15 at 12:20
@Nasuh I managed to fix some problems and now the manga is selected, selecting the chapter will be a bit more tricky, https://gist.github.com/GBora/3ef7af82e4cc7fbf6e62 – George Bora Oct 16 '15 at 12:39
Okay thank you. I got it worked but there is much to be done.:) – Nasuh Oct 16 '15 at 12:58

Set selected value of select menus

2 Answers2