如何在 angular <select> 中获取选定的选项

Question

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

我有一个 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);
        }

始终为名称获取未定义。

Answer 1

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

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

$scope.difficulty

应该保留您选择的项目。

想要看到它的工作尝试

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

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

希望对您有所帮助

Answer 2

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

如何在 angular <select> 中获取选定的选项

How to get selected option in angular <select>

javascript

angularjs

angular-material