从datalist ng-repeat角度获取对象

Question

我得到了如下的datalist，并为具有名称和id属性的颜色对象着色。

<datalist id="opts"> 
<option ng-repeat="color in colors" value = "{{color.id}}">color.name</option> 
</datalist> 

我的问题是，我想运行一个函数与id和所选颜色的名称。如何在不显示视图上的ID的情况下访问它们？

<button ng-click="someFunction(color.id,color.name)">button </button> 

Answer 1

你应该做手工，因为ng-options指令将是不错的选择去，但遗憾的是它并不支持datalist。为了获得内部控制范围内选择价值，你需要添加ng-model到datalist

标记

<datalist id="opts" ng-model="selectedColor"> 
    <option ng-repeat="color in colors" value = "{{color.id}}">color.name</option> 
</datalist> 

<button ng-click="someFunction(selectedColor)">button</button> 

，然后做色彩收集过滤器内部控制器如图所示someFunction

$scope.someFunction = function(){ 
    var selected = $filter('filter')($scope.colors, {id: parseInt(selectedColor)}, true), 
     selectedColor; 
    if(selected){ 
     selectedColor = selected[0]; 
    } 
} 

Answer 2

你可以做下面。

直接传递对象 - '颜色'并在控制器中访问'id'，'name'等。

HTML：

<button ng-click="someFunction(color)">button </button> 

JS：

$scope.someFunction = function (colorObj) { 
     // access colorObj.id, colorObj.name, etc. 
} 

Answer 3

使用角度表达在选项绑定{{color.name}}或使用value属性

<option ng-repeat="color in colors" value = "{{color.id}}" ng-change="someFunction(color)">{{color.name}}</option> 

你也可以给一个尝试在数据侧使用

ng-change

IST 例子：

<datalist id="opts"> 
<option ng-repeat="color in colors" value = "{{color.id}}" ng-change="someFunction(color)">{{color.name}}</option> 
</datalist> 

现在的功能，您可以访问这两个ID和名称...对于这个没有必要的submit button

$scope.someFunction = function(colorobj){ 
     var colorid=colorobj.id; 
     var colorname=colorobj.name; 
    }