Search code examples
angularjsng-options

grab two values from ng-options angular


I'm trying to loop through an object and link to a model but I'd like the model to be not just one method but multiple. I found a working example below with a plnkr.

HTML

<select ng-model="color" ng-options="(c.name+' '+c.shade) for c in colors"></select>

This is the controller

function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // red

}

I'm trying to achieve the same effect except I just want the color name to show in the drop down. I would still like to grab both the name and the color but I just want the color to show in the dropdown.

I've tried moving around the order of ng-options but no prevail. eg:

ng-options="c.name as (c.name+' '+c.shade) for c in colors"

but when I do this the view goes blank. Not sure to solve this

plnkr here: http://plnkr.co/edit/TZG3Ra7yTWcAxcimz91B?p=preview


Solution

  • Add Dang, so all I had to do was remove the concatenation part and have

    ng-options="c.name for c in colors"
    

    Angular takes care of the rest :)