从datalist ng-repeat angular获取对象

时间:2016-03-15 15:57:13

标签: angularjs datalist

我获得了如下所示的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>

3 个答案:

答案 0 :(得分: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];
    }
}

答案 1 :(得分:0)

使用角度表达式在选项中绑定{{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;
    }

答案 2 :(得分:-1)

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

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

HTML:

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

JS:

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