Question

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

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

HTML：

<div data-ng-controller="Main" data-ng-app>

  <select id="yo" data-ng-model="selection" data-ng-change="sample(selection)" required="required">
    <option value="11" selected="selected">Name 2</option>
    <option value="10">Name 1</option>
    <option value="">SELECT DEFAULT ANGULAR INIT</option>
    <option value="12">Name 3</option>
  </select>

在控制台到浏览器中查看显示（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 + jqLite。 AngularJS docs表示您应该使用标准DOM API进行高级查询（jqLite＆＃39; xlrd仅限于按标记名称查找）

find

您可以查看解决方案here

Answer 2

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

关于兼容性＆＃34; Niclas Larsson ＆＃34;是＆gt; = IE9 或更高，因为我使用的是 AngularJS 1.5.0 ，它不支持＆lt; = IE8 < / p>

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

代码示例仅在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

} }

链接示例运行 HERE

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

2 个答案: