4

我不知道我遇到的是否是一个错误，但我似乎无法在只有一个选项的 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()以及点击my 的 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 Balesstracci 的回答，因为它回答了这个问题。

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为不在列表中的值。存储在该模型中的值将确定选择哪个选项（反之亦然）。

您还应该能够利用 ngOptions 指令，而不是通过 ng-repeat 创建它们。 http://docs.angularjs.org/api/ng.directive:select

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

那么如果只有一个选项，为什么要使用选择框呢？或者第二个选项应该是“无”。

无论如何，如果你能把一个简单的 jsfiddle 放在一起，那将帮助人们更好地看到问题并能够使用它并希望找到你的答案。

于 2013-07-20T03:15:42.963 回答
0

我不同意将选择模型重置为空对象。这将清除您可能拥有的选项列表。相反，您可以使用模型将所选选项设置为零：

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