从 select ng-options 获取其他列

Question

在指令中我有以下内容：

<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>

metaData.items 数组包含多个列（itemId - unique、descrip、departmeId、categoryId、department、category、item）。

我想在选择项目时以某种方式获得这些列。我想让我的 ng-model 保持为 ItemId（例如 selectedItemId），就像我现在拥有的那样。

我应该更改什么才能进入这些列（如果需要，我可以使用 ng-change 事件）？

Answer 1

您是否希望在下拉列表中添加更多描述？

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

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

编辑：再次阅读并想使用 on-change() 后，我假设您在指令/控制器中需要此信息。在 html:

ng-change="itemChanged(selectedItemId)

在控制器中：

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

我只需要进一步说明您需要将这些变量拉到哪里。

Answer 2

如果您需要显示您需要更改的其他列：

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

至：

ng-options="c as c.descrip

当您 select 一个选项时，您的 selectedItemId 模型将包含一个对象。

然后您可以使用 ng-change="showItem(selectedItemId)" 来显示其他值。其中 selectedItemId 是当前对象。

Reference

像这样：

(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>

从 select ng-options 获取其他列

Get other columns from select ng-options

javascript

html

angularjs

angularjs-ng-options