如何在angularJS中访问Java脚本中的HTML变量

Question

I am filling a select list in angularJS. This is the code.

<select class="form-control" ng-model="NewProduct.category" ng-options="category.id as category.name for category in Categories | orderBy:['name']" ng-change="update(NewProduct.category)" required></select>

On change it calls update function; which print categoryID.

$scope.update = function (value) {
    alert ($scope.NewProduct.category);
};

But i want to access both categoryID nad categoryName in this update function. I tried:

$scope.update = function (value) {
    alert ($scope.NewProduct.category.id);
    alert ($scope.NewProduct.category.name);

};

But it alerts undefined, undefined.

How to get both categoryID nad categoryName in this update function.

Answer 1

Change your html to this:

<select class="form-control" ng-model="NewProduct.category" ng-options="category as category.name for category in Categories | orderBy:['name']" ng-change="update(NewProduct.category)" required></select>

This will store the entire category in NewProduct.category instead of just the id

Answer 2

Try to change to:

$scope.update = function(value) {
   alert(value.id);
   alert(value.name);
};

Answer 3

You are passing in to the update function the current category. Access it by the value parameter.

$scope.update = function (value) {
    alert (value.id);
    alert (value.name);
};

Answer 4

You should pass a object in ng-options like

ng-options="category as category.name for category in Categories | orderBy:['name']"

And you will get complete object in update function.

Answer 5

Maybe you should add toString() at the end of each value:

alert (value.id.toString());
alert (value.name.toString());