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

[Ashley]

Good Morning,

Hope everyone had a great Easter,

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 correctly but Angular 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 recommends, been reading a lot in Stack Overflow.

The problem is the ng-model, as this is set to items[0] (Client Script)  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-{{::options.color}} b" >
          <a target="{{item.target}}" ng-href="{{getItemHREF(item)}}" ng-click="onClick($event, item)" class="panel-body block">
            <div class="overflow-100">
              <h4 class="m-t-none m-b-xs hrline">{{item.name}}<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="{{item.picture}}" ng-if="item.picture" class="m-r-sm m-b-sm item-image pull-left" />
              <div class="text-muted item-short-desc">{{item.short_description}}</div>
            </div>
          </a>
          <div class="panel-footer" >
            <span  ng-if="item.u_show_price == 'true'" class="pull-right item-price font-bold">{{item.price}}</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>

Client Script:

	$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.

I know I can update the empty cell with some text but my client would really like it to default to 1.

Any suggests and I would be grateful,

Kind Regards

Ashley

[Ashley]

Afternoon, just discovered its the ng-if next to the select element that is breaking my code, if I remove it then it all works as expected, need to figure out another way of using it

[Ashley · Accepted solution]

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.