如何在角度<选择>中获取选择选项

How to get selected option in angular <select>

本文关键字：选择 选项 获取      更新时间：2023-09-26

试图弄清楚如何以角度获取所选项目的ID和名称。 基本上是全新的js和角度，所以不太确定我做错了什么。我确定我错过了一些简单的东西。

我有一个 html 元素，如下所示：

 <md-input-container>
     <label>Difficulty</label>
     <md-select ng-model="difficulty" ng-change="update()">
         <md-option ng-repeat="difficulty in difficulties">
             {{difficulty.Name}}
         </md-option>
    </md-select>
</md-input-container>

调用 api 以获取困难列表会返回以下 json

[{DifficultyID: 1, Name: "Easy"}, {DifficultyID: 2, Name: "Medium"}, {DifficultyID: 3, Name: "Hard"}]

在我的控制器中，我已经定义了方法

$scope.update = function () {
            console.log($scope.item.Name);
        }

始终为名称获取未定义。

在这种情况下ng-value可能很有用。参见工作 Plunker。

<md-select ng-model="difficulty">
     <md-option ng-value="opt" ng-repeat="opt in difficulties" ng-click="update(opt)">
         {{opt.Name}}
     </md-option>
</md-select>

我引入了opt变量，以消除difficulty重复。除此之外，我正在对特定选项进行ng-click，而不是在父md-select上ng-change

您选择的选项应该位于您在ng-model中设置的模型中。

也就是说，要访问您选择的选项，您应该在范围内测试您的难度模型

$scope.difficulty

应保留您选择的项目。

想看到它工作尝试

$scope.$watch('dificulty',function(newVal,oldVal){
  console.log($scope.dificulty);
});

每次模型更改时，它都会被打印出来。顺便说一句，我没有使用该指令。但是我没有看到该指令的可用属性支持的 ng-change。

希望对你有帮助

相关文章：