working with select options and an object in angularjs

Question

I need to display category value in a dropdown using select options from this object:

[{
    "_id": "57b4508923a10cd83c79a301",
    "created_by": "1",
    "category": "Criminal law",
    "__v": 0,
    "delete_status": "0",
    "active_status": "1",
    "modified_date": "1471434889599",
    "created_date": "1471434889599"
}, {
    "_id": "57b466b34f94fc982a0d926d",
    "created_by": "1",
    "category": "Business Law",
    "__v": 0,
    "delete_status": "0",
    "active_status": "1",
    "modified_date": "1471440563159",
    "created_date": "1471440563158"
}, {
    "_id": "57c6be3ae74cdc1d6a9b2224",
    "created_by": "1",
    "category": "Corporate Law",
    "__v": 0,
    "delete_status": "0",
    "active_status": "1",
    "modified_date": "1472642618768",
    "created_date": "1472642618768"
}]

I used below code but got undefined:

<select ng-model="category" ng-options="users.id as users.category for item in items"></select>

Can any one help me?

<select ng-model="category" ng-options="users.id as users.category for item in items"></select> — Raghav
– Raghav, Commented Sep 28, 2016 at 12:43
What is "category", "users" and "items" ? Which of them are you displaying as JSON above? — Matheno
– Matheno, Commented Sep 28, 2016 at 12:46
i want to render like this <select> <option value="57b4508923a10cd83c79a301">Criminal law</option> <option value="57b466b34f94fc982a0d926d">Business Law</option> <option value="57c6be3ae74cdc1d6a9b2224">Corporate Law</option> </select> — Raghav
– Raghav, Commented Sep 28, 2016 at 12:49
Possible duplicate of Working with select using Angular's ng-options — Abhijeet
– Abhijeet, Commented Sep 28, 2016 at 13:06

Krupesh Kotecha · Accepted Answer · 2016-09-28 13:16:52Z

1

Try this

var app = angular.module('app', []).controller('countryCtrl', ['$scope',
  function($scope) {
    $scope.records = [{
      "_id": "57b4508923a10cd83c79a301",
      "created_by": "1",
      "category": "Criminal law",
      "__v": 0,
      "delete_status": "0",
      "active_status": "1",
      "modified_date": "1471434889599",
      "created_date": "1471434889599"
    }, {
      "_id": "57b466b34f94fc982a0d926d",
      "created_by": "1",
      "category": "Business Law",
      "__v": 0,
      "delete_status": "0",
      "active_status": "1",
      "modified_date": "1471440563159",
      "created_date": "1471440563158"
    }, {
      "_id": "57c6be3ae74cdc1d6a9b2224",
      "created_by": "1",
      "category": "Corporate Law",
      "__v": 0,
      "delete_status": "0",
      "active_status": "1",
      "modified_date": "1472642618768",
      "created_date": "1472642618768"
    }];
  }
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="countryCtrl">
  <select ng-init="text._id = records[0]._id" ng-model="text" ng-options="record.category for record in records track by record._id">
  </select>
</div>

edited Sep 28, 2016 at 13:16

answered Sep 28, 2016 at 12:49

Krupesh Kotecha

2,4123 gold badges23 silver badges40 bronze badges

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

1 Comment

Raghav Over a year ago

sure.. but {{category}} is not displaying any thing i need id in it.. its displaying nothing after selecting

Ujjwal kaushik · Accepted Answer · 2016-09-28 12:54:58Z

0

<select ng-model="category" ng-options="item.id as item.category for item in items"></select>

just update this in your template (y) :)

answered Sep 28, 2016 at 12:54

Ujjwal kaushik

1,69613 silver badges18 bronze badges

Collectives™ on Stack Overflow

working with select options and an object in angularjs

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related