Question

我不知道我遇到的是一个错误，但我似乎无法重置Angular JS 1.0.2中的选择框（也使用1.1.5测试），其中只有一个选项。这是一个包含在Phonegap中的iPad应用程序。我已经在浏览器（Safari，Chrome）中进行了测试，问题仍然存在。

我正在开发一款应用程序，其中包含许多不同类别和子类别的产品。当您选择类别时，路线会更改并通常会重置选择框。它看起来像这样：

enter image description here

但是，如果您要选择一个选项，然后在子类别的选择框中只有一个选项时决定选择另一个子类别（当用户点击其中一个图像时，其中显示“其他”产品“）选择框未正确重置。使用时无法从此点前进到下一个选择框。它看起来像这样：

enter image description here

我几乎从各种资源中提出了这个功能，但是看起来Angular很古怪。到目前为止，它看起来像这样：

enter image description here

问题是我希望空格位于选项之前，而不是之后。然后，用户必须单击第二个空白选项，然后再次单击该选项以激活第二个选择框。

这是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。就像我说的那样，这些是下面图像的“其他产品”：

<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更改为列表中没有的值即可。它是存储在该模型中的值，用于确定选择哪个选项（反之亦然。）

您还应该能够利用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;
};

仅使用一个选项重置Angular JS中的选择框

3 个答案: