2017-10-19 110 views
0

我试图从下拉列表中选择与angularjs的值。当我选择的价值我得到这个错误angular.min.js:108 TypeError: Cannot read property 'ftype' of undefined从angulars下拉列表中获取选择值读取错误

HTML

<select name="select" ng-model="queryBy" ng-change="get_search_value(item)"> 
    <option ng-repeat="item in filter" value="{{item.ftype}}">{{item.ftype}}</option> 
</select> 

JS

$scope.search_type=''; 
    $scope.filter = [  
    { id: 1, ftype: "Complaint Type"}, 
    { id: 2, ftype: "Region" }, 
    { id: 3, ftype: "District"}, 
]; 

    $scope.get_search_value=function(item){ 
$scope.search_type=item.ftype; 
alert(item.ftype) 

    } 

回答

0

我想你误解了AngularJS ......它所有的这个要求。您不需要更新单独的值,也不需要更改事件就可以为您执行此操作。

这是我想你想实现:

HTML

<select name="select" ng-model="queryBy"> 
    <option ng-repeat="item in filter" value="{{item.ftype}}">{{item.ftype}}</option> 
</select> 

的JavaScript

$scope.filter = [  
    { id: 1, ftype: "Complaint Type"}, 
    { id: 2, ftype: "Region" }, 
    { id: 3, ftype: "District"} 
]; 

// you can access the selected value by using $scope.queryBy 

这是正确的,只是使用$scope.queryBy(或只是queryBy在你的HTML中)会给你所选的值选项。正如tymeJV所提到的,您也可以使用ngOptions而不是ngRepeat作为选项。我也建议您考虑使用ngBind而不是大括号,这样可以避免在评估之前表达本身闪烁。

+0

但功能在哪里 – user6579134

+0

这是不需要的,AngularJS会自动更新'$ scope.queryBy'以匹配选定的选项的值。如果您需要在变更时做其他事情,则可以将其添加回来,但不需要更新搜索类型。 –

1

我的猜测是item是对<select>水平不可见。无论在<option>(所以,“项目”)中的任何值都应该保存在ng-model值中,即queryBy。你为什么将item传递给get_search_value?尝试在get_search_value功能acessing的queryBy代替

0

您应该使用ngOptions - 你item无法访问您目前拥有的方式。这里有一个快速重构,应该工作:

相关问题