Question

我想要一个下拉选择框，其中包含来自数组的选项，我希望能够访问所选选项和数组索引的某些属性。

所以，例如我有一个数组：

<select name="currentlySelected" ng-model="selectedId" ng-options="cat.id as cat.name for cat in selectOptions" ng-change="change(selectedId)">
</select>

当选择其中一个选项时，我希望能够访问selectOptions中所选选项的id和索引位置。现在我有这个选择id：

$scope.change = function ($parentId, $arrayId) {
 $scope.currentlySelected = $scope.selectOptions[$arrayId];
 $scope.selectedId = $parentId;
};

但我还想将selectOptions数组中所选选项的索引作为输入发送给change函数。我希望能够做到这一点：

+----------+------------+-----------+-------------+------------+
| EventId  | EventName  | Country   | Attendance  | EventDate  |
+----------+------------+-----------+-------------+------------+
|        1 | Soccer1    | Australia |       12000 | 2015-01-01 |
|        2 | Soccer2    | Mexico    |       35999 | 2016-02-02 |
|        3 | Soccer3    | Australia |       13999 | 2015-03-22 |
|        4 | Football1  | Japan     |       13555 | 2003-11-12 |
|        5 | Football2  | Japan     |       12222 | 2004-01-01 |
|        6 | Football3  | Canada    |       13444 | 2003-02-23 |
|        7 | Tennis1    | America   |       10000 | 2014-01-02 |
|        8 | Tennis2    | America   |       12111 | 2015-10-01 |
+----------+------------+-----------+-------------+------------+

CREATE TABLE [dbo].[Sports](
    [EventId] [int] NULL,
    [EventName] [varchar](50) NULL,
    [Country] [varchar](50) NULL,
    [Attendance] [int] NULL,
    [EventDate] [date] NULL
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (1, N'Soccer1', N'Australia', 12000, CAST(N'2015-01-01' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (2, N'Soccer2', N'Mexico', 35999, CAST(N'2016-02-02' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (3, N'Soccer3', N'Australia', 13999, CAST(N'2015-03-22' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (4, N'Football1', N'Japan', 13555, CAST(N'2003-11-12' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (5, N'Football2', N'Japan', 12222, CAST(N'2004-01-01' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (6, N'Football3', N'Canada', 13444, CAST(N'2003-02-23' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (7, N'Tennis1', N'America', 10000, CAST(N'2014-01-02' AS Date))
INSERT [dbo].[Sports] ([EventId], [EventName], [Country], [Attendance], [EventDate]) VALUES (8, N'Tennis2', N'America', 12111, CAST(N'2015-10-01' AS Date))

有人知道怎么做吗？

Answer 1

在我给你解决方案之前，我想首先建议你不要做你想做的事情。你基本上是两次跟踪同一件事。您想要选定的object和所选的id。如果您跟踪所选的object，您也始终拥有该ID。我建议你尝试跟踪所选对象。当您需要ID时，只需使用object.id

为什么不选择对象然后同步属性：

<select name="currentlySelected" ng-model="selectedItem" 
        ng-options="cat as cat.name for cat in selectOptions"
        ng-change="change()">
</select>

然后在你的代码中

$scope.change = change;

function change() {
   $scope.selectedId = $scope.selectedItem && $scope.selectedItem.id
}

Answer 2

您可以将该对象用作值引用：

<select name="currentlySelected" ng-model="selectedId" ng-options="cat as cat.name for cat in selectOptions"> <!-- You don't need the ng-change, it's not neccecary -->

在控制器中，您需要保存对数组中对象的引用：

$scope.change = function ($arrayId) {
     $scope.currentlySelected = $scope.selectOptions[$arrayId];
     console.log($scope.selectedId);  // THE MODEL HOLES THE OBJECT ITSELF
 };
 $scope.change(1); // EXAMPLE for changing the value from the code

Answer 3

检查下面的示例，这可以帮助您完成任务

ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions"

＆＃13;

angular.module('app', []).run(function($rootScope){
  $rootScope.selectOptions = [{id: 1, name: 'name1'}, {id: 2, name: 'name2'}, {id: 3, name: 'name3'}];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<select name="currentlySelected" ng-model="selectedId" ng-options="{catId: cat.id, index: idx} as cat.name for (idx, cat) in selectOptions">
</select>
  <p>
    selectedId: {{selectedId}}
  </p>
</div>

＆＃13;

AngularJS选择具有id和数组索引的选项

3 个答案: