Angular - 选择框 - 从控制器中设置选定的条目

Question

我有一个选择框，定义如下：

 <select ng-model="selectedSupplier" ng-options="supplier.name for supplier in suppliers">
 </select>

在我的控制器中，我有一个按钮，虽然没有做任何有用的事情，但它可以解释我在更改控制器中的选定值时遇到的问题：

该函数执行时，设置选择框中的选项，设置选中的选项：

$scope.foo = function() {
    var foos = [{"id":1,"name":"No 1"},{"id":2,"name":"No 2"},{"id":3,"name":"No 3"},{"id":4,"name":"No 4"}];
    $scope.suppliers = foos;
    $scope.selectedSupplier = foos[2];
}

但是我把函数改成这样了，它仍然设置选项，但是选中的选项是一个新的空白选项，没有我定义的：

$scope.foo = function() {
    var foos = [{"id":1,"name":"No 1"},{"id":2,"name":"No 2"},{"id":3,"name":"No 3"},{"id":4,"name":"No 4"}];
    $scope.suppliers = foos;
    $scope.selectedSupplier = {"id":3,"name":"No 3"};
}

这里发生了什么？如何使用原始对象以外的对象设置所选选项？

Answer 1

这是一个平等/身份问题。文字

 $scope.selectedSupplier = {"id":3,"name":"No 3"};

与您的 foos 数组中的对象不同。尽管它们包含相同的数据，但它们是 2 个不同的引用。

$scope.selectedSupplier === foos[2] // false

您在第一个示例中正确引用了数组中的对象。

$scope.selectedSupplier = foos[2];

Answer 2

ngOptions 指令以不同方式处理数组和对象：https://docs.angularjs.org/api/ng/directive/ngOptions

Answer 3

在这一行：

$scope.selectedSupplier = {"id":3,"name":"No 3"};

您将一个独立对象分配给$scope.selectedSupplier，它不是选项列表的一部分。幕后没有深度比较 - 如果是复杂对象，您必须分配实际对象本身。

例如，如果您想根据 id 属性分配选定的值，请使用以下代码：

var idToAssign = 2;
for (var i = 0; i < $scope.suppliers.length; i++) {
    var curSupplier = $scope.suppliers[i];
    if (curSupplier.id == idToAssign) {
        $scope.selectedSupplier = curSupplier;
        break;
    }
}

Answer 4

我尝试删除对象键周围的"（id 不是"id"），因为它在 javascript 中不是必需的，并且它有效。

  $scope.foo = function() {
       var foos = [{id:1,name:"No 1"},{id:2,name:"No 2"},{id:3,name:"No 3"},{id:4,name:"No 4"}];
       $scope.suppliers = foos;
       $scope.selectedSupplier = {id:3,name:"No 3"};
  };

如果您没有问题删除引号，那么它可以是一个解决方案