angular, loop object array in a select and show two values

Question

I am working in app and i get this complicated situation with select and the select value. I have a json answer "portions" if it is necessary i can re-arrange my json to solve my problem.

"products": [
    {...},
    {...},
    {
        // Here the json
        "id": 13,   
        "hightlighted": true,   
        // Here the portions that i loop in the "select"
        "portions": [
            {
              "size": "De 10 a 20 porciones",
              "price": "20"
            },
            {
              "size": "De 20 a 30 porciones",
              "price": "30"
            },
            {
              "size": "De 30 a 40 porciones",
              "price": "40"
            }
        ]
    }
]

<div class="item" ng-repeat="product in products">
// Here is my try one
<select class="form-control" ng-init="size=product.portions[0].size" ng-model="size" >
    <option ng-repeat="p in product.portions" value="[[p.size]]" > 
        [[p.size]]
    </option>
</select>
<div>
    [[I need here the selected PRICE]] <br>
    [[size]] <br>
</div>

// My try 2
<select class="form-control" ng-init="price=product.portions[0].price" ng-model="price" >
    <option ng-repeat="p in product.portions" value="[[p.price]]" > 
        [[p.size]]
    </option>
</select>
<div>
    [[price]] <br>
    [[I need here the selected SIZE]]
</div>
</div>

Thank you for any help.

edit. I am using [[]] instead of {{}}

.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Here the solution !!! thanks solution

You should be using {{ }} for data binding, not [[ ]]. See the docs for select here: https://docs.angularjs.org/api/ng/directive/select — buzzsaw
– buzzsaw, Commented Oct 17, 2015 at 17:20
Your question would be easier to answer if you told use what you want to achieve. What do you want the end result to be? What do you want the select box to look like? — JB Nizet
– JB Nizet, Commented Oct 17, 2015 at 17:30

Index · Accepted Answer · 2015-10-17 17:39:40Z

1

You are looking for ngOptions.

Given that I understand your case, select as label for value in array is the correct approach.

<select ng-options="portion.price as portion.size for portion in portions">

edited Oct 17, 2015 at 17:39

answered Oct 17, 2015 at 17:32

Index

2,3814 gold badges33 silver badges51 bronze badges

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

2 Comments

shaunhusain Over a year ago

Good answer same as mine but more concise.

RollRodrig Over a year ago

Thank you @KGChristensen It helped me too to solve my problem, here the solution solution

shaunhusain · Accepted Answer · 2015-10-17 17:32:50Z

0

Better I think to use ng-options. Ng-init should only be used for ng-repeat aliasing.

angular.module('myApp',[])
.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
})

.controller('MyController', function($scope){

  $scope.product = {
"id": 13,   
"hightlighted": true,   
// Here the portions that i loop in the "select"
"portions": [
    {
      "size": "De 10 a 20 porciones",
      "price": "20"
    },
    {
      "size": "De 20 a 30 porciones",
      "price": "30"
    },
    {
      "size": "De 30 a 40 porciones",
      "price": "40"
    }
]
    }
  
  $scope.product.selectedPortion = $scope.product.portions[0];
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>

<div ng-app='myApp' ng-controller="MyController">
<select class="form-control" ng-options="p as p.size for p in product.portions" ng-model="product.selectedPortion" >
</select>
<div>
    [[product.selectedPortion.price]] <br>
</div>
</div>

answered Oct 17, 2015 at 17:32

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

1 Comment

RollRodrig Over a year ago

thank you, i made it on code pen and works, also i made a little change link

Collectives™ on Stack Overflow

angular, loop object array in a select and show two values

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related