问题
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)?
回答1:
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>
回答2:
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.
来源:https://stackoverflow.com/questions/33792218/get-other-columns-from-select-ng-options