Question

我对Angular有一些问题，从下拉列表中选择一个项目并使Angular更新模型。

我一直在搜索StackOverflow，但只是运气不好。

问题在于，当我在模型上手动设置值时，我的下拉列表更新正确，但模型本身不会更新;

$scope.setSelected = function(){
    $scope.selected.id = 15;
    //$scope.$apply();// $apply already in progress
}

从StackOverflow上的各种答案中，我发现Angular不知道此更新，建议的答案是运行$scope.$apply()或$scope.$digest()，但两者都抛出{{ 1}}例外。我觉得这不是我这样做的正确方法，因为它没有意义，你必须触发一个事件来按值选择。

按给定值选择下拉列表中的商品的正确方法是什么？

可以在https://jsfiddle.net/c2x3jvut/

找到完整的代码示例

单击“选择晚餐”按钮时，下拉列表更新正确，但显示的模型和单击“选择日志”时，它仅显示所选模型，但具有更新的ID。

Answer 1

ng select根据其ngModel绑定其值，该示例中的ngModel操作不正确。正确的方法是更改ngModel的引用而不是select的id：

$scope.setSelected = function () {
    $scope.selected = $scope.persons[1];  // yes
    // $scope.selected.id = 15;  // no
};

Fiddle might have been updated显示效果。

Answer 2

您可以使用$ filter来获取整个对象而不是每个属性。

$scope.setSelected = function(){
    $scope.selected = $filter('filter')($scope.persons,15,'id')[0];
    //$scope.selected.id = 15;
    //$scope.$apply();// $apply already in progress
  }

Here is the modified version

Answer 3

不确定我理解你的问题，但仍然......

您可以在下拉列表的每个条目中加入：

...ng-click="setSelected(<value>)"...

，当然，还要在函数中添加一个参数。

顺便提一下，你是否知道在小提琴例子中你选择了函数setSelected中的ID 15？

Answer 4

您只是使用ID更新当前模型。但仔细看，名字和年龄保持不变。此外，您需要更新整个对象，如下所示：

$scope.setSelected = function(){
    $scope.selected.id = 15;
    $scope.selected.name = "Dinner-man";
    $scope.selected.age = 20;
  }

或直接更新对象的任何其他方式。

在下拉列表中按值选择的正确方法是什么？

4 个答案: