如何通过#ID 100％AngularJS获取元素SELECT中的Text和Value

有一个更好的方法来做AngularJS，我的例子中的代码行数较少……？ 我的想法是使用AngularJS和jqLit​​e 100％。

链接示例我的CODE解决方案： http ： //jsfiddle.net/EOM/xecymL9t/

HTML：

  Name 2 Name 1 SELECT DEFAULT ANGULAR INIT Name 3  

在控制台到浏览器中查看显示（F12）

AngularJS：

 function Main($scope, $document) { $scope.sample = function(myvalue) { // Get By ID var e = $document[0].getElementById('yo'); // Get all options select e = angular.element(e).find('option'); // Loop angular.forEach(e, function(v, k){ // Is option selected..? if(angular.element(v).prop('selected')){ // Get Text option selected console.log('Text: '+angular.element(v).text()); // Text } }); console.log('Value: '+myvalue) // Value }} 

Answer 1

这有点短，但我不知道你是否认为它是100％AngularJS + jqLit​​e。 AngularJS文档说您应该使用标准DOM API进行高级查询（jqLit​​e的find仅限于按标记名称查找）

 function Main($scope, $document) { $scope.sample = function(myvalue) { var e = $document[0].getElementById('yo') .querySelector('[value="' + myvalue + '"]'); // Get Text option selected console.log('Text: '+angular.element(e).text()); // Text console.log('Value: '+myvalue) // Value } } 

您可以在此处查看解决方案

Answer 2

基于解决方案“ jbMartinez ”，我看到一个更简单的解决方案缩短了句柄。 并检索所选选项的文本。

关于兼容性“ Niclas Larsson ”是> = IE9或更高，因为我使用AngularJS 1.5.0并且它不支持<= IE8

说，把它视为最终的解决方案，或者它可能是一种更好的方式……？

代码示例仅在JS中更改：

 function Main($scope, $document) { $scope.sample = function(myvalue) { var myval = (myvalue)?myvalue:''; // Get text select var mytext = $document[0].querySelector('#yo [value="' + myval + '"]').text; // Show Text option selected in console console.log('Text: '+mytext); // Text console.log('Value: '+myval) // Value } } 

链接示例在 此处 运行