Get other columns from select ng-options

Question

In the directive I have the following:

<select class="col-md-3 form-control" ng-model="selectedItemId" id="item" name="item"
                ng-disabled="!selectedCategoryId"
                
                ng-options="c.itemId as c.descrip for c in metaData.items | filter: {departmeId:selectedDepartmentId, categoryId:selectedCategoryId}">
            <option value="">@String.Format(Labels.selectX, Labels.item)</option>
        </select>

The metaData.items array contains several columns (itemId - unique, descrip, departmeId, categoryId, department, category, item).

I want to somehow get these columns when I'm selecting an item. I would like to keep my ng-model to be the ItemId (e.g. selectedItemId) as I have right now.

What should I change to get to these columns (I can use ng-change event if needed)?

Answer 1

Are you looking to add more description in the drop down list?

<select data-ng-model="engineer.currentActivity"
    data-ng-options="a.name +' (' + a.type + ')' for a in activities">                

Reference: http://odetocode.com/blogs/scott/archive/2013/06/19/using-ngoptions-in-angularjs.aspx

Edit: After reading again and wanting to use on-change() I assume you need this info in the directive / controller. In html:

ng-change="itemChanged(selectedItemId)

In the controller:

$scope.itemChanged = function (itemId) {
                var m = $scope.metaData.items;
                var pos = $scope.metaData.items.map(function (e) { return e.itemId; }).indexOf(itemId);
                var item = $scope.metaData.items[pos];
                var descrip = item.descrip;
                var departmentId = item.departmeId;
                var categoryId = item.categoryId;
                var department = item.department;
                var category = item.category;
                var theItem = item.item;
            };

I just need further clarification as to where you need to pull these variables.

Answer 2

If you need to show the others columns you need to change:

ng-options="c.itemId as c.descrip

to:

ng-options="c as c.descrip

Your selectedItemId model will contain an object when you select an option.

Then you can use the ng-change="showItem(selectedItemId)" to show the others values. Where selectedItemId is the current object.

Reference

Something like this:

(function() {
  var app = angular.module("myApp", []);
  app.controller("Controller", ["$scope",
    function($scope) {
      $scope.metaData = {};
      $scope.metaData.items = [{
        "itemId": 1,
        "descrip": "Some description.",
        "departmeId": 1,
        "categoryId": 1,
        "department": "Department 1",
        "category": "Category A",
        "item": "Item 1."
      }, {
        "itemId": 2,
        "descrip": "Description 2...",
        "departmeId": 2,
        "categoryId": 1,
        "department": "Department 2",
        "category": "Category B",
        "item": "Item 2..."
      }];
      $scope.showItem = function(item) {
        $scope.descrip = item.descrip;
        $scope.departmeId = item.departmeId;
        $scope.categoryId = item.categoryId;
        $scope.department = item.department;
        $scope.category = item.category;
        $scope.item = item.item;
      };
    }
  ]);
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
  <div data-ng-controller="Controller">
    <select class="col-md-3 form-control" ng-change="showItem(selectedItemId)" ng-model="selectedItemId" id="item" name="item" ng-options="c as c.descrip for c in metaData.items | filter: {departmeId:selectedDepartmentId, categoryId:selectedCategoryId}">
      <option value=""></option>
    </select>
    <div>descrip: {{descrip}}</div>
    <div>departmeId: {{departmeId}}</div>
    <div>category: {{category}}</div>
    <div>department: {{department}}</div>
    <div>departmeId: {{departmeId}}</div>
    <div>item: {{item}}</div>
  </div>
</div>