如何获得元素文本和值由#ID 100％AngularJS选择

本文介绍了如何获得元素文本和值由#ID 100％AngularJS选择的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有一个更好的方式做AngularJS，与我的例子code更少的行..？我们的想法是用AngularJS和jqLit​​e使其100％。

链接比如我的code的解决方案： jsfiddle / EOM / xecymL9t /

HTML：

＆LT; D​​IV数据-NG-控制器=主数据-NG-应用＆GT;  ＆LT;选择一个id =哟的数据-NG-模式=选择数据-NG-变化=样品（选择）需要=需要＆GT;    ＆LT;期权价值=11选择=选择＆GT;名称2'; /选项＆GT;    ＆LT;期权价值=10＆GT;名称1 LT; /选项＆GT;    ＆LT;期权价值=＆GT;选择缺省INIT ANGULAR LT＆; /选项＆GT;    ＆LT;期权价值=12＆GT;名称3'; /选项＆GT;  ＆LT; /选择＆GT;

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

AngularJS：

函数main（$范围，$文件）{$ scope.sample =功能（myvalue的）{        //获取编号查询        变种E = $文件[0] .getElementById（'哟'）;    //获取所有选项中进行选择    E = angular.element（五）.find（'选项'）;    //循环    angular.forEach（即功能（V，K）{        //是选项进行选择..？        如果（angular.element（五）.prop（'选择'））{        //获取文本选项选中        的console.log（'文字：+ angular.element（V）的.text（））; //文本      }    }）;    的console.log（'值：'+ myvalue的）//值}}

解决方案

根据解决方案的 jbMartinez ，我看到了一个简单的解决方案缩短了把手。和检索所选选项的文本。

对于兼容性尼克拉斯拉尔森是有> = IE9 或更高，因为我使用的 AngularJS 1.5.0 并它不为支持＆LT; = IE8

说的，把它看作是一个最终的解决方案也可能是一个更好的办法..？

code实例只在JS改变：

函数main（$范围，$文件）{$ scope.sample =功能（myvalue的）{    VAR =设为myVal（myvalue的）myvalue的？'';    //获取文本选择    VAR MYTEXT = $文件[0] .querySelector（'＃哟[值=+ +设为myVal']）的文本。    //显示控制台中选择文本选项    的console.log（'文字：+ MYTEXT）; //文本    的console.log（'值：'+设为myVal）//值}}

链接示例执行 这里

There is a better way to do AngularJS, with fewer lines of code that my example ..? The idea is to make it 100% with AngularJS and jqLite.

Link Example My CODE solution: jsfiddle/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>

View Show in Console to Browser (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 }}

解决方案

Based on solution "jbMartinez", I saw a simpler solution shortens the handles. And retrieve the text of the option selected.

With respect to compatibility "Niclas Larsson" is to have >= IE9 or higher, since I am using AngularJS 1.5.0 and it does not support for <= IE8

Are saying, see it as a final solution or it may be a better way ..?

Code Example only change in 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 } }

Link Example Run HERE