私が経験していることがバグであるかどうかはわかりませんが、オプションが 1 つしかない Angular JS 1.0.2 (1.1.5 でもテスト済み) の選択ボックスをリセットできないようです。これは、Phonegap でラップされた iPad アプリ用です。ブラウザ(Safari、Chrome)でテストしましたが、問題はまだあります。
さまざまなカテゴリとサブカテゴリにある多くの製品を含むアプリに取り組んでいます。カテゴリを選択すると、ルートが変更され、通常は選択ボックスがリセットされます。そして、それは次のようになります:
ただし、サブカテゴリの選択ボックスにオプションが 1 つしかないときに、オプションを選択してから別のサブカテゴリを選択することにした場合 (ユーザーが「その他の製品」と表示されている画像の 1 つをクリックした場合)。選択ボックスが正しくリセットされません。ユーザーは、この時点から次の選択ボックスに進むことはできません。次のようになります。
さまざまなリソースからこの関数を考え出すことで、ほとんど機能するようになりましたが、Angular は風変わりなようです。これまでのところ、次のようになります。
問題は、空白をオプションの後ではなく前にしたいことです。次に、ユーザーは 2 番目の空白のオプションをクリックし、2 番目の選択ボックスを有効にするためにもう一度オプションをクリックする必要があります。
JS は次のとおりです。
$scope.reset = function() {
$scope.variants.selectedIndex = 0;
};
これがJSONです。これらのバリアントのセットは同じサイズであることに注意してください。
1: {
name: 'Super Awesome Product',
description: 'Cool description',
category: 'viewers',
variants: {
1: {
color: 'Gold',
size: '55-62mm',
productCode: 'FCSTVG',
price: 0,
image: [path + 'FCSTVG-T.png', path + 'FCSTVG.png']
},
2: {
color: 'Silver',
size: '55-62mm',
productCode: 'FCSTVS',
price: 0,
image: [path + 'FCSTVS-t.png', path + 'FCSTVS.png']
}
}
}
};
選択ボックスの HTML は次のとおりです。
<select ng-model="selectedVariant" ng-show="variants != null">
<option ng-repeat="size in variants" value="{{size}}">
{{size[0].size}}
</option>
</select>
そして、myreset()
がクリックされた場所の HTML。私が言ったように、これらは以下の画像の「その他の製品」です。
<div class="other-products">
<h2>Other products</h2>
<div class="slide-container">
<ul ng-show="products != null" style="width: {{products.length * 112}}px">
<li ng-repeat="p in products" ng-show="findDefaultImage(p) != null">
<a href="#" eat-click ng-click="selectProduct(p.id);reset()">
<img ng-src="{{findDefaultImage(p)}}" alt="" />
</a>
</li>
</ul>
</div>
</div>
$scope.variants.selectedIndex = 0;
-1や1など、この行にさまざまな値を追加するなど、すべてを試しました。
どんな助けでも大歓迎です!
更新:ハードコーディングして問題を解決しました。なぜ私が以前にそれをしなかったのかわかりませんでしたが、質問に答える@Shawn Balestracciの回答を支持しています。
Angular では、選択ボックスの「インデックス 0」を空にして、選択ボックス内のすべてのオプションを 1 に戻す傾向がありますが、実際には、ユーザーが選択するオプションは、実際にはドロップダウン リストの次のオプションです。これがバグなのか機能なのかはわかりません。
HTMLをハードコードした方法は次のとおりです。
<select ng-model="selectedVariant" required="required" ng-show="variants != null">
<option style="display:none" value="">PICK ONE:</option>
<option ng-repeat="size in variants" value="{{size}}">
{{size[0].size}}
</option>
</select>
これにより、Angular がドロップダウンのオプションを押し戻すのを防ぎます。