Question

我获得了如下所示的datalist，并为具有name和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

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

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

您也可以尝试在数据列表中使用

ng-change

例如：

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

Answer 3

您可以按照以下说明进行操作。

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

HTML：

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

JS：

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

从datalist ng-repeat angular获取对象

3 个答案: