AngularJS select / ng-options

Question

Currently I'm stuck on a select input field. In the project was used this code:

<select ng-init="crtController.order.orders[$index].quantity = 0" ng-model="crtController.order.orders[$index].quantity" ng-options="value for value in crtController.quantity.values track by value" ng-change="crtController.quantity.check()"></select>

It was using this "quantity" variable:

this.quantity = {
        values: [0,1,2,3,4,5,6,7,8,9,10],
        decrease: function(index) {
            if (vm.order.orders[index].quantity > 0) {
                vm.order.orders[index].quantity--;
                this.check();
            }
        },
        increase: function(index) {
            if (vm.order.orders[index].quantity < 10) {
                vm.order.orders[index].quantity++;
                this.check();
            }
        },
        check: function() {
            this.valid = false;
            for (var i = 0; i < vm.order.orders.length; i++) {
                if (vm.order.orders[i].quantity > 0) {
                    this.valid = true;
                }
                vm.order.orders[i].productId = vm.products[i].id;
            }
            vm.calculatePrice();
        }
    }

On the top of this select I've got a variable product.stock. Let's say this is 5. In that case I only want it to show 0,1,2,3,4,5 from the quantity array.

I already tried serveral things: 1. Adding a "where" clause. This didn't seem to work or I implemented it the wrong way of course. 2. Added a filter, not quite sure how this works using the value variable and the product.stock variable but I gave it a try. 3. I tried to change it so the repeat is on a option. This gave the possibility to "hide" options that should not be shown.

<select ng-init="crtController.order.orders[$index].quantity = 0" ng-model="crtController.order.orders[$index].quantity" ng-change="crtController.quantity.check()">
                                        <option ng-repeat="value in crtController.quantity.values track by value" value="{{value}}" ng-hide="product.stock < value" ng-bind="value"></option>
                                    </select>

but that didn't seem to work either as the first value of the selectbox is now empty. Beside that the buttons arround the select option:

<div class="input-group-addon hidden-xs"><a class="min" ng-click="crtController.quantity.decrease($index)">-</a></div>

didn't seem to work anymore. I also have visited a lot of similar Stackoverflow questions but still didn't find my solution. Questions such as: AngularJs conditional display for ng-options: I don't have this in my array, but didn't work just on a check of two variable.

can you make a Plunker/JSfiddle/anything with an example of your code? — valepu
– valepu, Commented Dec 21, 2016 at 10:34

dimson d · Accepted Answer · 2016-12-21 10:55:52Z

3

not sure that i understand question but try to change ng-hide by ng-if inside

or

<option ng-repeat="value in crtController.quantity.values|limitTo:product.stock track by $index" value="{{value}}" ng-if="product.stock >= value" ng-bind="value"></option>

answered Dec 21, 2016 at 10:55

dimson d

1,6591 gold badge14 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

JeroenE Over a year ago

Nice! Your second option works awesome if I add it to the first select box of my post. Thank you very much!

JeroenE Over a year ago

Is there a way to do such thing like: limitTo:product.stock+1? As I should add one more because my first array entry is 0.

JeroenE Over a year ago

Sorry found it. I did that but it didn't work as I was working with an string.. Now just firstly used parseInt and then this was working fine. Thank you.

Utku Apaydin · Accepted Answer · 2016-12-21 11:09:03Z

0

You can try filtering the options

<option ng-repeat="value in crtController.quantity.values track by
 value | filterQuantity " value="{{value}}" ng-bind="value"></option>

filters.filter('filterQuantity', function () {
     return function(tasks, tags) {
            return tasks.filter(function(value) {
              ...
            });
        };
});

just play around with this, i hope it helps

answered Dec 21, 2016 at 11:09

Utku Apaydin

1621 silver badge4 bronze badges

Collectives™ on Stack Overflow

AngularJS select / ng-options

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related