Angularjs 从数据列表获取对象

我得到了下面这样的数据列表，并用name和id属性给一个color对象着色

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

color.name

我的问题是，我想用所选颜色的id和名称运行一个函数。如果不在视图上显示id，如何访问这两个文件

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

按钮

您应该手动执行，因为

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>

---

您可以按如下所示操作

直接传递对象-“颜色”并访问控制器中的“id”、“名称”等

HTML:

使用角度表达式在选项或使用值属性中绑定

{{color.name}

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

---

您无法传递

color

对象，因为它未被选中

datalist

如果他将值从color.id更改为color，则可能是因为我尝试了，但selectedColor仍然未定义：（可能对您有帮助。）

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

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

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

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