AngularJSをクリックしてコントローラから選択したオプションにアクセスする方法

StackOverflow https://stackoverflow.com//questions/24001662

質問

UI-BootstrapのTabset内のタブにng-model属性を持つSELECTフィールドがあります。タブにはボタンもあります。ボタンをクリックすると、モデル内の選択した値を取得します。私は

を使ってみました 
<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick()">Click</button>
.

とコントローラ内の

$scope.buttonClick = function() {
  //try to access $scope.selectedOption
}
.

しかしそれは値を含んではないようです。$scope変数を検索しようとしましたが、selectedOption

という名前の$$childTailが含まれているようです。

選択されたオプション値にアクセスするための他の方法はありますか、それとも私のビューの構造を変更する必要がありますか？

私はここで私がしようとしているもののPlunker 。

役に立ちましたか？

解決

Mathew BergとBumbleBeeの答えの両方が働くべきですが、彼らは何が起こっているのか説明していません。

基本的にそれはこのように下がる：

使用しているTabsetディレクティブは、SelectedOptionが実際には内部スコープ（Tabsetのスコープ）にあり、TabsDemoctrlの対処ではありません。 この答えはどの翻訳が行われているかを説明します。断続的なモデルにどのようにアクセスするか

Transcleusionはモデルの浅いコピーを作ります。そのため、TabsDemoctrlのtransclusionのようなinit selectedオプションが選択された場合でも、SELECTは開始時に選択されたときに5つの変更が表示されますが、タブセットの子には変更が表示されません。スコープ5は単にコピーされ、更新されているものはあなたの範囲ではなくタブセットの範囲内にあります。

選択したモデルにオブジェクトを使用することもできます。トランスクークリュージョンは浅いコピーを作成するので、オブジェクト/配列/関数は参照によってコピーされ、変数は値によってコピーされます。これはまた、内部範囲からあなたのTabsDemoctrlのボタンをクリックすることができる理由です。

別の代替ソリューション（オブジェクトバージョン）を使用してPLNKRを更新しました：

コントローラにオブジェクトを作成

$scope.selection = {};
.

とこのようなモデルに使用されています

ng-model="selection.option"
.

http://plnkr.co/edit/5si0arorv9dulzAdxrra?p=preview

他のヒント

Angular UIタブ/ Tabset Direcive新しいスコープを作成するように、親スコープにアクセスするには（あなたがしようとしているもの）$ pargy

を添付してください。 
<select name="selectedCampaign" ng-model="$parent.selectedOption" ng-options="option for option in options"></select>
.

更新されたPlunkr：> http://plnkr.co/edit/bgmmn4tjrwm72zxeqg3n

編集：謝罪、私は質問を誤解させます、あなたはただ何をしないでください。

<select ... ng-model="selectedOption"></select>
<button ng-click="buttonClick(selectedOption)">Click</button>

$scope.buttonClick = function(selectedOption) {
  selectedOption.whatever...
}
.

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top