CODEWITHSUNDEEP
javascriptangularjsangularjs-scope
skdonthi
skdonthi

Reputation: 1442

AngularJS - How to change key value based on dropdown options

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

Upvotes: 0

Views: 954

Answers (1)

Pratik Bhattacharya
Pratik Bhattacharya

Reputation: 3746

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"
      }
    }
  };

Upvotes: 1

Related Questions