javascript 仅用一个选项重置 Angular JS 中的选择框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17757888/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resetting a select box in Angular JS with a only one option
提问by Paul
I don't know if what I'm experiencing is a bug, but I can't seem to reset a select box in Angular JS 1.0.2 (also tested with 1.1.5) where there is only one option. This is for a iPad app wrapped in Phonegap. I've tested in the browser (Safari, Chrome) though and the issue is still there.
我不知道我遇到的是否是一个错误，但我似乎无法在只有一个选项的 Angular JS 1.0.2（也用 1.1.5 测试）中重置选择框。这是用于封装在 Phonegap 中的 iPad 应用程序。我已经在浏览器（Safari、Chrome）中进行了测试，但问题仍然存在。
I'm working on an app that has many products that are in different categories and sub-categories. When you select a category the route changes and normally resets the select box. And it looks like so:
我正在开发一个应用程序，其中包含许多属于不同类别和子类别的产品。当您选择一个类别时，路线会发生变化并且通常会重置选择框。它看起来像这样：
However, if you were to choose an option and then decide to choose another sub-category when there is only one option in the select box for a sub-category (when the user clicks one of the images where it says "Other Products") the select box doesn't properly reset. The userthen can't advance from this point to the next select box. It looks like this:
但是，如果您要选择一个选项，然后在子类别的选择框中只有一个选项时决定选择另一个子类别（当用户单击其中一个显示“其他产品”的图像时）选择框没有正确重置。用户然后不能从这个点前进到下一个选择框。它看起来像这样：
I've almost gotten it to work by coming up with this function from the various resources out there, but seems Angular is being quirky. It looks like this with where I've got so far:
通过从各种资源中提出这个函数，我几乎已经让它工作了，但似乎 Angular 很古怪。到目前为止，我的位置看起来像这样：
The problem is that I want the blank space to be before the option, not after. Then the user has to click the second blank option and then click the option again in order to activate the second select box.
问题是我希望空格在选项之前，而不是之后。然后用户必须单击第二个空白选项，然后再次单击该选项以激活第二个选择框。
Here is the JS:
这是JS：
$scope.reset = function() {
$scope.variants.selectedIndex = 0;
};
Here is the JSON. Notice that these set of variants have the same size:
这是 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']
}
}
}
};
And the HTML for the select box:
以及选择框的 HTML：
<select ng-model="selectedVariant" ng-show="variants != null">
<option ng-repeat="size in variants" value="{{size}}">
{{size[0].size}}
</option>
</select>
And the HTML for the where my reset()is clicked. Like I had said, these are the "Other Products" of images below:
以及用于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>
I've tried everything, like adding different values to this line $scope.variants.selectedIndex = 0;like -1 or 1.
我已经尝试了所有方法，例如向该行添加不同的值，$scope.variants.selectedIndex = 0;例如 -1 或 1。
Any help would be appreciated!
任何帮助，将不胜感激！
UPDATE: I solved the issue by hardcoding it. Didn't know why I didn't do it before, but I'm still endorsing @Shawn Balestracci answer as it answers the question.
更新：我通过硬编码解决了这个问题。不知道为什么我之前没有这样做，但我仍然支持 @Shawn Balestracci 的回答，因为它回答了这个问题。
Angular has a tendency to empty out the "index 0" of a select box pushing all of the options back 1 in the select box, but in actuality the option that a user selects is actually the next option in the drop down list. I don't know if this is a bug or a feature.
Angular 倾向于清空选择框的“索引 0”，将选择框中的所有选项推回 1，但实际上用户选择的选项实际上是下拉列表中的下一个选项。我不知道这是错误还是功能。
Here's how I hardcoded the HTML:
这是我硬编码 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>
This stops Angular from pushing back the options in the drop down.
这会阻止 Angular 推回下拉列表中的选项。
采纳答案by Shawn Balestracci
In your reset function just change $scope.selectedVariantto a value that isn't in the list. It's the value stored in that model that will determine which option is selected (and vice-versa.)
在您的重置功能中，只需更改$scope.selectedVariant为不在列表中的值。存储在该模型中的值将决定选择哪个选项（反之亦然）。
You should also be able to take advantage of the ngOptions directive isntead of creating them via ng-repeat. http://docs.angularjs.org/api/ng.directive:select
您还应该能够利用 ngOptions 指令而不是通过 ng-repeat 创建它们。 http://docs.angularjs.org/api/ng.directive:select
$scope.reset = function() {
$scope.selectedVariant = {};
};
回答by MrSteve
So if there is only one option, why use a select box? Or should the second option be "none".
那么如果只有一个选项，为什么要使用选择框呢？或者第二个选项应该是“无”。
In anycase, if you could put together a simple jsfiddle, that would help folks better see the problem and be able to play with it and hopefully find you an answer.
无论如何，如果你能把一个简单的 jsfiddle 放在一起，那将帮助人们更好地看到问题并能够解决它，并希望找到你的答案。
回答by Jason
I disagree with resetting the select model to an empty object. That will blank out the list of options you may have there. Instead you can set the selected option to zero using the model:
我不同意将选择模型重置为空对象。这将清除您可能在那里拥有的选项列表。相反，您可以使用模型将所选选项设置为零：
$scope.reset = function() {
$scope.selectedVariant = 0;
};
