获得选择NG选项等栏目 [英] Get other columns from select ng-options

问题描述

在该指令我有以下几点：

\r

\r

＆LT;选择类=COL-MD-3表格控NG-模型=selectedItemIdID =项NAME =项\r
                NG-禁用=！selectedCategoryId\r
                \r
                NG-选项=c.itemId作为c.descrip在metaData.items B |过滤器：{departmeId：selectedDepartmentId，的categoryId：selectedCategoryId}＆GT;\r
            ＆LT;期权价值=＆GT; @的String.Format（Labels.selectX，Labels.item）LT; /选项＆GT;\r
        ＆LT; /选择＆GT;

\r

\r

\r

该metaData.items数组包含若干列（的itemId - 独特的，记述，departmeId，的categoryId，部门，类别，物品）。

我想，当我选择一个项目以某种方式获得这些列。我想保持我的NG-模型是ITEMID（例如selectedItemId），因​​为我有现在。

我应该怎么改才能到这些列（我可以用NG-change事件如果需要的话）？

解决方案

如果您需要显示的其他列，你需要改变：

  NG选项=c.itemId为c.descrip
 

到

  NG选项=C作为c.descrip
 

您 selectedItemId 模式将包含一个对象，当你选择一个选项。

然后就可以使用 NG-变化=showItem（selectedItemId）来显示其他值。其中， selectedItemId 是当前对象。

<大骨节病> 参考

事情是这样的：

\r

\r

（函数（）{\r
  VAR应用= angular.module（对myApp，[]）;\r
  app.controller（控制器，[$范围\r
    功能（$范围）{\r
      $ scope.metaData = {};\r
      $ scope.metaData.items = [{\r
        的itemId：1，\r
        记述：一些说明。\r
        departmeId：1，\r
        的categoryId：1，\r
        部：1系，\r
        类别：A类，\r
        项目：项目1。\r
      }，{\r
        的itemId：2，\r
        记述：说明2 ......\r
        departmeId：2，\r
        的categoryId：1，\r
        部：二部，\r
        类别：B类，\r
        项目：项目2 ......\r
      }];\r
      $ scope.showItem =功能（项目）{\r
        $ scope.descrip = item.descrip;\r
        $ scope.departmeId = item.departmeId;\r
        $ scope.categoryId = item.categoryId;\r
        $ scope.department = item.department;\r
        $ scope.category = item.category;\r
        $ scope.item = item.item;\r
      };\r
    }\r
  ]）;\r
}）（）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV数据-NG-应用=对myApp＆GT;\r
  ＆LT; D​​IV数据-NG-控制器=控制器＆GT;\r
    ＆LT;选择类=COL-MD-3表格控NG变化=showItem（selectedItemId）NG模型=selectedItemIdID =项NAME =项NG选项=C为c .descrip在metaData.items B |过滤器：{departmeId：selectedDepartmentId，的categoryId：selectedCategoryId}＆GT;\r
      ＆LT;期权价值=＆GT;＆LT; /选项＆GT;\r
    ＆LT; /选择＆GT;\r
    ＆LT; D​​IV＆GT;记述：{{}记述}＆LT; / DIV＆GT;\r
    ＆LT; D​​IV＆GT; departmeId：{{departmeId}}＆LT; / DIV＆GT;\r
    ＆LT; D​​IV＆GT;类别：{{}类}＆LT; / DIV＆GT;\r
    ＆LT; D​​IV＆GT;部门：{{}部门}＆LT; / DIV＆GT;\r
    ＆LT; D​​IV＆GT; departmeId：{{departmeId}}＆LT; / DIV＆GT;\r
    ＆LT; D​​IV＆GT;项目：{{}项}＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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

解决方案

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>

这篇关于获得选择NG选项等栏目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！