4

私が経験していることがバグであるかどうかはわかりませんが、オプションが 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 がドロップダウンのオプションを押し戻すのを防ぎます。

4

3 に答える 3

4

リセット機能$scope.selectedVariantでは、リストにない値に変更するだけです。どのオプションが選択されるかを決定するのは、そのモデルに格納されている値です (逆も同様です)。

また、ng-repeat を介してそれらを作成する代わりに、ngOptions ディレクティブを利用できるはずです。 http://docs.angularjs.org/api/ng.directive:select

 $scope.reset = function() {
    $scope.selectedVariant = {};
};
于 2013-07-20T07:50:41.697 に答える
1

オプションが 1 つしかないのに、なぜセレクト ボックスを使用するのでしょうか。または、2 番目のオプションを「なし」にする必要があります。

いずれにせよ、単純なjsfiddleをまとめることができれば、人々が問題をよりよく理解し、それで遊んで、うまくいけば答えを見つけるのに役立ちます.

于 2013-07-20T03:15:42.963 に答える
0

選択モデルを空のオブジェクトにリセットすることに同意しません。これにより、そこにある可能性のあるオプションのリストが空白になります。代わりに、モデルを使用して選択したオプションをゼロに設定できます。

$scope.reset = function() {
    $scope.selectedVariant = 0;
};
于 2013-11-13T17:57:27.887 に答える