ng-select AngularJS

Question

I'm trying to put together an ng select to select these quantities:

   "splits":[  
      1,
      2,
      3,
      4,
      5,
      6,
      8
   ],


<select  ng-options="?" ng-model="ticket_group.quantity" </select>

Then I want to show the price multiplied by the quantity they have chose

 <div style="text-align: center;font-size:25px;"><b> ${{ticket_group.retail_price * ticket_quantity}} USD</b>

So would I just reference the ng-model for this?

Please help me figure out ng-select and have it display the final price

Answer 1

ng-model is not the problem, considering you expect $scope.ticker_group.quantity to hold the value at the end.

What you need to set is ng-options . First of all, those options must be in the scope:

$scope.splits = [
    1,
    2,
    3,
    4,
    5,
    6,
    8
];

This is an example. You used a key (ie splits belonged to a literal object) so you must ensure the object having such key belongs (directly or not) to the $scope .

Following MY example, splits is now in the scope, so I can use it as data-binding expression in the ng-options .

ng-options expects key:value are specified, so the syntax is:

ng-options="foo as bar for (foo, bar) in anObject"

So if you have any object, you can iterate keys (properties) and values. notice that foo and bar are examples (you can use any name, being sure such names are not reserved words), where foo is declared in the place to define the keys (ie the value attribute of each option object), and bar is declared in the place to define labels for such options.

As an alternative, if you iterate an array object instead of other classes object, you can specify like this:

ng-options="foo as foo for foo in anArray"

which will generate options having the value as the label (same contents). You will use them like this:

ng-options="val as val for val in splits"

AND if you have a case where you have an array of objects and want to specify value and label from properties of such objects, like:

$scope.people = [{dni:32111269, nombre:"Pepe Galleta"}, {dni:11111111, nombre:"Nestor Kirchner"}, {dni:12345678, name:"Mi Abuela"}, {dni: 23456789, nombre:"Tu Hermana"}];

And want to make dni as the value, and nombre as the label, You'd use:

ng-options="foo.dni as foo.nombre for foo in people"

See more here: https://docs.angularjs.org/api/ng/directive/select

Who will hold the value? : The expression you set in the ng-model directive will be the holder of the selected value once you use the selector.

You want, perhaps, to use a:

$scope.$watch('splits', function(v){
    ...
});

to show the price being modified by the value on splits .