2016-11-30 5 views
0

私は、ページのさまざまなセクションのいくつかのリンクを含むドロップダウンメニューを持っています。アプリケーションはAngularJSバージョン1.4で書かれていますが、ドロップダウンメニューは機能しますが、ドロップダウンメニューのURLからページを直接入力すると、正しい音声の代わりに空の音声が常に選択されます。ここでは」コード:AngularJSはURLに基​​づいてデフォルトオプションを選択します

HTML

<select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()"> 
</select> 

JS:私はドロップダウンメニューで音声を選択した場合

$scope.changeLink = function(){ 
    $state.go($scope.selectedOption.url); 
}; 

$scope.menu_voices = [ 
    { 
     "url": 'account.company', 
     "name": 'Company' 
    }, 
    { 
     "url": 'account.billing', 
     "name": 'Billing' 
    }, 
    { 
     "url": 'account.password', 
     "name": 'Password' 
    }, 
    { 
     "url": 'account.design', 
     "name": 'Design' 
    }, 
    { 
     "url": 'account.social', 
     "name": 'Social' 
    }, 
    { 
     "url": 'account.notifications', 
     "name": 'Notifications' 
    } 
]; 

、私が選択した正確な声で正しいリンクにアクセスしてください。しかし、URLバーに次のように入力してください:

www.myapp.com/account/billing 

私は正しいページに行きますが、ドロップダウンメニューでは選択した声は空です。

どうすればこの問題を解決できますか?最初の応答の後

EDIT:

Object {name: "Design", url: "account.design"} 
:私はコンソールに

console.log($scope.selectedOption); 

を印刷する場合、私が正しいオブジェクト、例えばを取得

var name = $window.location.pathname; 
name = name.substring(9); 
name = name.charAt(0).toUpperCase() + name.slice(1); 

var url = $window.location.pathname.substring(1).replace(/\//g, '.'); 

$scope.getSelectedFromUrl = function(){ 
    $scope.selectedOption = {"name": name, "url": url}; 
}; 

私はこれを追加しました

htmlでng-initを追加しました:

<select ng-options="menu_voice.name for menu_voice in menu_voices track by menu_voice.url" ng-model='selectedOption' ng-change="changeLink()" ng-init="selectedOption = getSelectedFromUrl()"> 
</select> 

何も変更されていません。

+0

私たちに短いサンプルを教えてもらえますか? – Nico

+0

短いサンプルの意味は? – ste

答えて

1

ng-initディレクティブを使用して、ルートを解析し、それをボイスアレイの項目に一致させる関数を呼び出すことができます。次に、selectedOptionモデルをその配列項目に設定します。これにより、selectオプションが設定されます。

ng-init="selectedOption = getSelectedFromURL()" 
+0

私のメッセージが更新されました! – ste

関連する問題