AngularJS - How to change key value based on dropdown options

Question

I am pushing keys to one array and I am iterating it to get options in dropdown.Creating a (key,value) pair, keys in array and options are same. When we change the option in dropdown, the corresponding value should be rendered in HTML.

Here is the code:

$scope.viewItemKeys = [pencils, pens, books];

$scope.viewItemObj = {
    "pencils": {
      "0": {},
      "1": {},
      "2": {}
    },
    "pens": {
      "0": {},
      "1": {},
      "2": {},
      "3": {},
      "4": {}
    },
    "5": {},
    "6": {},
    "7": {}
  },
  "books": {
    "0": {},
    "1": {},
    "2": {},
    "3": {},
    "4": {}
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select id="selId" ng-options="key as value for (key , value) in viewItemkeys" ng-model="selectedItem" ng-change='onItemChange()'></select>

please help me out if I select pens with respect to key (i.e 1 to 7 , inside pens) I need to render {} value

You should be binding the select to viewItemObj. ViewItemKeys is an array, you cant create a KV pair out of it. — Pratik Bhattacharya
– Pratik Bhattacharya, Commented Apr 15, 2016 at 12:07
@Pratik, when I use like " key as value for (key , value) in viewItemObj ", I got [object Object] as options in dropdown. — skdonthi
– skdonthi, Commented Apr 15, 2016 at 12:13
That's because you are using 'as value'. It should be 'as key'. Take a look at my answer below, I have added a fiddler link as well. — Pratik Bhattacharya
– Pratik Bhattacharya, Commented Apr 15, 2016 at 12:14

Pratik Bhattacharya · Accepted Answer · 2016-04-18 07:07:51Z

1

Take a look at this fiddler here

Your viewItemObj is a little wrong

$scope.viewItemObj = {
"pencils": {
  "0": {},
  "1": {},
  "2": {}
},
"pens": {
  "0": {},
  "1": {},
  "2": {},
  "3": {},
  "4": {},
  "5": {},
  "6": {},
  "7": {}
},
"books": {
  "0": {},
  "1": {},
  "2": {},
  "3": {},
  "4": {}
}

};

There was an extra '}' there. I have modified the HTML as follows

<select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select><br/>
  Selected Item - {{selectedItem | json}}

This will render the value of the key that you select.
Let me know if this is what you are looking for.

EDIT
Based on your comments I have created a new FIddle for you here. This new fiddle will display the values of the selected object. I have modified the HTML a bit:

<div ng-controller="MyCtrl">
  <select id="selId" ng-options="value as key for (key , value) in viewItemObj" ng-model="selectedItem" ng-change='onItemChange()'></select>
  <div ng-repeat="item in selectedItem">
    {{item.Name}}
  </div>
</div>

I have also added some dummy data in your object

$scope.viewItemObj = {
    "pencils": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Nataraj"
      },
      "2": {
        Name: "Space"
      }
    },
    "pens": {
      "0": {
        Name: "Camel"
      },
      "1": {
        Name: "Parker"
      },
      "2": {
        Name: "Fountain"
      },
      "3": {
        Name: "Dealer"
      },
      "4": {
        Name: "Gel"
      },
      "5": {
        Name: "Inker"
      },
      "6": {
        Name: "Mountain View"
      },
      "7": {
        Name: "Decor"
      }
    },
    "books": {
      "0": {
        Name: "The Da Vinci Code"
      },
      "1": {
        Name: "How to kill a Mocking Bird"
      },
      "2": {
        Name: "Tooth and Nails"
      },
      "3": {
        Name: "A song of Ice and Fire"
      },
      "4": {
        Name: "Dance with the Dragons"
      }
    }
  };

edited Apr 18, 2016 at 7:07

answered Apr 15, 2016 at 12:13

Pratik Bhattacharya

3,7562 gold badges38 silver badges66 bronze badges

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

6 Comments

Pratik Bhattacharya Over a year ago

Did you get what you were looking for? Or are you looking for a different solution?

skdonthi Over a year ago

Thanks Prathik and please help me out if I select pens with respect to key (i.e 1 to 7 , inside pens) I need to render {} value

Pratik Bhattacharya Over a year ago

Ca you please explain your doubt in a little detail? What is it that you need to render when you select 'pens'? Do you need to render the items (like the value of 1,2 ... 7)?

Pratik Bhattacharya Over a year ago

Take a look at my edit, I think this is what you are looking for. Here is the link to the modified fiddle - jsfiddle.net/pratikjs/14wkps2c.

skdonthi Over a year ago

Exactly!! Thanks a lot @Pratik

|

Collectives™ on Stack Overflow

AngularJS - How to change key value based on dropdown options

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related