javascript - 如何使用angularjs获取下拉列表框文本？

Question

如何获取下拉列表框选中的文本值，并找到函数调用的来源(从哪里调用函数)。

<div ng-controller="cntrl">
<select id="dflfnt"  ng-change="opfun()" ng-model='mddl1' ng-options='option.value as option.name for option in ddl1Options.data'> 
</select>

<select id="3dfnt" ng-model='mddl2' ng-change="opfun()" ng-options="option.value as option.name for option in ddl2option.data">

</select>
</div>

<script>
function cntrl($scope)
{
$scope.ddl1Options={
data:[
{value:"Georgia, serif",name:"Style 1"},
{value:"'Palatino Linotype', 'Book Antiqua', Palatino, serif",name:"Style 2"}
]};

$scope.ddl2option={
data:[
{value:"font-effect-anaglyph",name:"anaglyph"},
{value:"font-effect-brick-sign",name:"brick-sign"},
{value:"font-effect-canvas-print",name:"canvas-print"},
{value:"font-effect-crackle",name:"crackle"}
]};


    $scope.opfun=function(){            
        alert($scope.mddl1); // Here I can get the value only
    }

}
</script>

在上面我想知道 opfun() 从哪里触发并获取下拉列表框的选定文本。

我试图获取如下所示的文本。

alert($scope.ddl2option.data[0].name);

但它显示始终选择索引。

Answer 1

不完全确定您想要什么，但尝试从 ng-options 指令中删除 option.value 。

这就是你的目标吗..

此外，您确实应该考虑将变量名称更改为更具可读性的名称，因为这样很难弄清楚这些神秘的变量名称到底发生了什么。

DEMO

app.js

var app = angular.module('plunker', []);

app.controller('cntrl', cntrl);


function cntrl($scope){

  $scope.ddl1Options = {
    data:[
      {value:"Georgia, serif", name:"Style 1"},
      {value:"'Palatino Linotype', 'Book Antiqua', Palatino, serif", name:"Style 2"}
    ]
  };

  $scope.mddl1 = $scope.ddl1Options.data[0];

  $scope.ddl2option = {
    data:[
      {value:"font-effect-anaglyph",name:"anaglyph"},
      {value:"font-effect-brick-sign",name:"brick-sign"},
      {value:"font-effect-canvas-print",name:"canvas-print"},
      {value:"font-effect-crackle",name:"crackle"}
    ]

  };

  $scope.mddl2 = $scope.ddl2option.data[0];


  $scope.opfun = function(selectedModelValue){            
      //alert(selectedModelValue); // Here I can get the value only
  }

}

index.html

  <select 
    id="dflfnt"  
    ng-change="opfun(mddl1)" 
    ng-model='mddl1' 
    ng-options='option.name for option in ddl1Options.data'
  ></select>

  <select 
    id="3dfnt" 
    ng-model='mddl2' 
    ng-change="opfun(mddl2)" 
    ng-options="option.name for option in ddl2option.data"
  ></select>

  <h5>mddl1</h5>
  <pre>{{mddl1}}</pre>

  <h5>mddl2</h5>
  <pre>{{mddl2}}</pre>

</div>