Select inside ng-repeat with ng-options and ng-model

Question

Good Morning,

Hope everyone had a great Easter,

Before I begin, I want to point out this is being developed in ServiceNow Orlando release, it uses AngularJS 1.6.10

I'm stuck on a tricky piece of code I can't get right, I'm using an ng-repeat to build out a catalog of hardware devices, in this case its Laptops, we have added a button which quickly allows people to add the device to the cart, we now want to add a quantity field so that multiple devices can be added at the same time, I got it working but AngularJS adds in an empty cell at the beginning, I need to get it to default to 1, I did get it to do this but it broke the cart experience as every item added to the cart is a 1 no matter what quantity is selected.

so this is most of the html code which also includes the ng-repeat that builds out the hardware devices, I am using an ng-options that everyone seems to recommend, been reading a lot in Stack Overflow.

The problem is the ng-model, as this is set to $scope.items[0] it never gets updated, I have been looking at getterSetter but very much going over my head at the moment, can't get it to work.

 <div class="col-sm-6 col-md-4 funky-show-hide" ng-show="selectedCat==item.categoryBelongTo" ng-repeat="item in data.items track by $index">
    <div class="panel panel- b" >
      <a target="" ng-href="" ng-click="onClick($event, item)" class="panel-body block">
        <div class="overflow-100">
          <h4 class="m-t-none m-b-xs hrline"><span ng-if="item.content_type == 'external'"> <i ng-if="data.isDownloadable.indexOf(item.sys_id) ==-1" class="fa fa-external-link-square" aria-hidden="true" style="color: #498fcc;"></i><i ng-if="data.isDownloadable.indexOf(item.sys_id) >-1" class="fa fa-download" aria-hidden="true" style="color: #498fcc;"></i></span></h4>
          <img ng-src="" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
          <div class="text-muted item-short-desc"></div>
        </div>
      </a>
      <div class="panel-footer" >
        <span  ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold"></span> &nbsp;
        <button ng-if="item.u_show_add_to_cart_button == 'true' " name="submit" ng-disabled="submitted" ng-click="triggerAddToCart(item.sys_id, selected.label)" class="btn btn-primary">${Add to Cart}</button>
        <select ng-if="item.u_show_quantity_button == 'true'"
                name="Quantity"
                id="quantity"
                ng-disabled="submitted"
                ng-model="selected"
                class="form-control quantity-selector"
                data-toggle="tooltip"
                tooltip-top="true" 
                data-original-title="${Quantity}"
                ng-options="item as item.label for item in items track by item.id">
        </select>
      </div>
    </div>
  </div>

Controller:

$scope.items = [{
    id: 1,
    label: '1'
}, {
    id: 2,
    label: '2'
}, {
    id: 3,
    label: '3'
}];

$scope.selected = $scope.items[0];

What it all looks like:

So I have selected "3" on the Performance PC Laptop but if you look at the console log on the right, you can see the value added is 1.

Picture to display value added to cart

Shame really, I was happy with the empty cell but its what the client would like, I know I can update the empty cell with some text but they would really like it to default to 1.

Any suggests and I would be grateful,

Bored Panda

Answer 1

Replacing the ng-if with ng-show resolved my problem, days lost trying to figure this out, also developed a simpler solution with number increment

Code Here:

<input type="number" value="1" min="1" max="20" step="1" ng-model="items_increment" title="Quantity" ng-show="item.u_show_quantity_button == 'true'"/>

$scope.items_increment = 1;

Hope it helps another person.