Question

我正在使用选择允许用户在事件和年份之间切换。每次更改都会从服务器中提取适当的数据，返回并更新页面。但是，选择框从选定值变为空值。我看过很多解决方案而且没有用。

<select
   ng-model="eventName"
   ng-options="item.value for item in eventOptions track by item.value"
   ng-change="changeEvent(eventName.value)">
</select>

这是changeEvent函数：

$scope.changeEvent = function(eventName){
    $scope.eventName = eventName; //wrongly assumed this would update the selected value
    $scope.getData($scope.eventName,$scope.eventYear); //this returns the json - correct
    $scope.updateSelected(); //meant to update the select field value on the page - fails
};

$ scope.eventName或$ scope.eventYear值将在更改时正确更新，但对页面没有影响。选择只清空所选值。

更新（已更正的代码） 我想比评论允许更清楚地发布我所做的更改。

我从选项和函数调用中的参数（eventName.value）中删除了对象参数“value”。

<select
    ng-model="eventName"
    ng-options="item for item in eventOptions track by item"
    ng-change="changeEvent()">
</select>

并且changeEvent函数被简化为：

$scope.changeEvent = function(){
    $scope.getData($scope.eventName,$scope.eventYear);
};

这一切都按预期工作！感谢所有人，特别是让我以正确的方式看待它的达美航空。

Answer 1

因此，您的事件名称变量设置为item。不是item.value所以不要传递changeEvent(eventName.value)而是传递changeEvent(eventName)。无论哪种方式，您传递给方法的值都不匹配模型变量的值

item.value for item in eventOptions track by item.value

因此，对于此声明，您说要设置我的选项ng-model=item，但要制作他们的value=item.value，以便他们显示您希望他们展示的内容，但仍然可以获得每个所需的所有信息。

进一步检查后看起来像你不需要：

 $scope.eventName = eventName; 
 $scope.updateSelected();

Angular应该为您更新您的eventName，您只需要调用change方法。

Answer 2

我不确定你需要：

ng-change="changeEvent(eventName.value)"

如果使用ng-options，模型将在选择时自动在范围内更新。如果你想在改变时做其他事情，你可以在控制器中观察值：

$scope.$watch('eventName', function() {
   //do stuff
});

无法选择Angular选择以使用所选值进行更新

2 个答案: