角度-选择框-设置控制器中的选定条目

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 : 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"};
  };

如果删除引号没有问题，那么可以解决