僅使用一個選項重置Angular JS中的選擇框

Question

我不知道我遇到的是一個錯誤，但我似乎無法重置Angular JS 1.0.2中的選擇框（也用1.1.5測試），其中只有一個選項。 這是一個包含在Phonegap中的iPad應用程序。 我已經在瀏覽器（Safari，Chrome）中進行了測試，問題仍然存在。

我正在開發一款應用程序，其中包含許多不同類別和子類別的產品。 當您選擇類別時，路線會更改並通常會重置選擇框。 它看起來像這樣：

但是，如果您要選擇一個選項，然后在子類別的選擇框中只有一個選項時（當用戶單擊其中一個圖像顯示“其他產品”時），則決定選擇另一個子類別選擇框未正確重置。 使用時無法從此點前進到下一個選擇框。 它看起來像這樣：

通過從各種資源中提出這個功能，我幾乎得到了它的工作，但似乎Angular是古怪的。 到目前為止我看起來像這樣：

問題是我希望空白區域位於選項之前，而不是之后。 然后，用戶必須單擊第二個空白選項，然后再次單擊該選項以激活第二個選擇框。

這是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>

以及單擊我的reset()的HTML的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推回下拉列表中的選項。

Answer 1

在重置函數中，只需將$scope.selectedVariant更改$scope.selectedVariant中的值。 它是存儲在該模型中的值，用於確定選擇哪個選項（反之亦然）。

您還應該能夠利用ngOptions指令而不是通過ng-repeat創建它們。 http://docs.angularjs.org/api/ng.directive:select

 $scope.reset = function() {
    $scope.selectedVariant = {};
};

Answer 2

因此，如果只有一個選項，為什么要使用選擇框？ 或者第二個選項應該是“無”。

在任何情況下，如果你可以把一個簡單的jsfiddle放在一起，這將有助於人們更好地看到問題，並能夠使用它，並希望找到答案。

Answer 3

我不同意將選擇模型重置為空對象。 這將刪除您可能在那里的選項列表。 相反，您可以使用模型將所選選項設置為零：

$scope.reset = function() {
    $scope.selectedVariant = 0;
};