從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; 
    }