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

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

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

4 个答案: