如何从angularjs指令中的ng选项返回对象的索引

how to return index of object from ng-options in angularjs directive

本文关键字：ng 选项 对象 索引 返回 angularjs 指令      更新时间：2023-09-26

我正在尝试使用指令制作一个月选择器。我将月份定义为一个索引/名称对象数组，并使用ng选项在指令中创建一个选择下拉列表。

我的目标是

  • 将月份作为本地范围变量传递
  • 更新变量，以及
  • 以可读html的形式（如下所示：）

<month-select month="myMonth"></month-select>

到目前为止，我把月份作为一个整数来传递，但一旦我做出选择，它就会变成一个对象。例如

IN1：用户选择Jun:

输出{ value : 6, name : 'Jun' }

我只希望模型值变为6。

这是我的指示：

app.directive('monthSelect', function () {
    return {
        restrict : 'E',
        replace : true,
        scope : { month: '=' },
        controller : function ($scope) {
            $scope.months = [];
            $scope.month_names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
            $scope.month_indexes = [0,1,2,3,4,5,6,7,8,9,10,11];
            $scope.month_names.forEach(function (mn, i) {
                $scope.months.push({ value : i+1, name : mn });
            });
        },
        template : '<select ng-model="month" ng-options="m.name for m in months track by m.value"></select>'
    };
});

有没有办法更改它，使其只更新月份索引？

这是一个plunkr：http://plnkr.co/edit/LVqRUCVO6Rpr9QlDtacQ?p=preview

将模板更改为

<select ng-model="month" 
        ng-options="m.value as m.name for m in months">
</select>

如果你愿意的话，也许你可以将指令的控制器重构为

var month_names = ['Jan', 'Feb', 'Mar', ..., 'Dec'];
$scope.months = [];
angular.forEach(month_names, function(name, num) {
    this.push({ value:num, name:name }); 
}, $scope.months);
相关文章：