Reset select box in Angular JS with just one parameter

Question

I don’t know if what I am experiencing is an error, but I cannot imagine resetting the select box in Angular JS 1.0.2 (also verified since 1.1.5), where there is only one option. This is for an iPad app wrapped in Phonegap. I tested in a browser (Safari, Chrome), although the problem still exists.

I am working on an application in which there are many products that are in different categories and subcategories. When you select a category, the route changes and usually resets the selection field. And it looks like this:

However, if you must select an option, and then decide to select another subcategory, when there is only one option for the subcategory in the selection field (when the user clicks one of the images where he says "Other Products"), the selection field does not correspond to reset. The installer cannot move from this item to the next selection block. It looks like this:

I almost started working by inventing this function from various resources there, but it seems that Angular is quirky. This is similar to where I still have:

The problem is that I want the empty space to be before the option, and not after. Then the user needs to click the second “Empty” parameter, and then click this option again to activate the second flag.

Here is the JS:

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

Here is the JSON. Please note that these variations are the same size:

 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 HTML for the select box:

 <select ng-model="selectedVariant" ng-show="variants != null"> <option ng-repeat="size in variants" value="{{size}}"> {{size[0].size}} </option> </select> 

And HTML for where my reset() clicked. As I said, these are the “Other Products” images below:

 <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 tried everything, for example, adding different values ​​to this line $scope.variants.selectedIndex = 0; e.g. -1 or 1.

Any help would be appreciated!

UPDATE: I solved the problem by hard-coding it. I don’t know why I didn’t do this before, but I still support @Shawn Balestracci's answer when he answers the question.

Angular tends to clean out the “index 0” of the select box by pushing all options back 1 in the select box, but in fact the option that the user selects is actually the next option to fall down. I do not know if this is a bug or function.

This is how I hardcoded the 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 returning options in the drop-down list.

Answer 1

In your reset function, just change $scope.selectedVariant to a value not in the list. This value stored in this model will determine which option is selected (and vice versa).

You should also be able to use the ngOptions isntead directive to create them via ng-repeat. http://docs.angularjs.org/api/ng.directive:select

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

Answer 2

So, if there is only one parameter, why use a select box? Or the second option should be "none".

In any case, if you could put together a simple jsfiddle, it would help people better see the problem and be able to play with it and hopefully find you the answer.

Answer 3

I do not agree with dumping the selected model to an empty object. This will close the list of options that you may have there. Instead, you can set the selected option to zero using the model:

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