在下拉菜单中按价值选择的正确方法是什么？

我在使用Angular时遇到了一些问题，并从下拉列表中选择一个项目，并使Angular更新模型。在下拉菜单中按价值选择的正确方法是什么？

我一直在寻找StackOverflow，但只有部分运气。

问题是，当我手动设置模型的值，我的下拉更新正确，但模型本身不更新;

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

从StackOverflow上各种各样的回答，我已经发现了角不知道这个更新和建议的答复是，选择运行一个$scope.$apply()或$scope.$digest()，但都抛出一个异常$apply already in progress。我有一种感觉，这不是我做这件事的正确方法，因为它没有意义，你必须触发一个事件来按价值选择。

根据给定的值在下拉列表中选择项目的正确方法是什么？

完整的代码示例可以在https://jsfiddle.net/c2x3jvut/

发现当点击“选择dinnerman”按钮，在下拉更新正确，但已显示的模型，然后点击“登录选择”时，只显示所选择的模式，但与更新的ID。

来源

2016-07-27 Esben Boye-Jacobsen

您可以使用$ 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

来源

2016-07-27 09:06:27

这是我后 - 非常感谢！我不得不做一个小调整设置{id：15}，以确保Angular只查看id，但除此之外它的工作原理应该如此！ –

ng's select根据其ngModel绑定其值，该ngModel在示例中正在被错误操作。正确的方法是改变ngModel的参考，而不是选择的ID：

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

Fiddle might have been updated显示效果。

来源

2016-07-27 08:41:09 Brian

不知道我理解你的问题，但仍...

您可以包括在下拉菜单中的每个条目：

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

，当然，参数添加到函数。

顺便说一句，您是否知道在小提琴示例中，您正在函数setSelected中选择ID 15？

来源

2016-07-27 08:41:13 FDavidov

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

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

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

来源

2016-07-27 08:41:29 Naveen

在下拉菜单中按价值选择的正确方法是什么？

回答

相关问题