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 - 唯一，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

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

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

Reference

这样的事情：

＆＃13;

(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;
      };
    }
  ]);
})();

＆＃13;

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

＆＃13;

从选择ng-options中获取其他列

2 个答案: