javascript - 即使我可以看到对象的内容，我也无法访问该对象的属性

Question

当我使用 Bootstrap 的下拉菜单方式时，这段代码曾经工作得很好。现在我切换到传统方式，我不知道为什么会遇到这个问题。为什么我无法访问属性？这里让我发疯

HTML

    <select class="form-control" ng-model="client" ng-change="clientSelect(client)">
        <option value="">--- Please Select ---</option>
        <option ng-repeat="client in clientList" value="{{client}}">{{client.clientName}}</option>
    </select>

Angular/Javascript

$scope.clientSelect = function (client) {
  console.log(client);
  console.log(client.clientName);  //is undefined
  console.log(client.clientId);  //is undefined
}

输出:

{"clientId":102,"clientName":"Testing"}  //i clearly see the properties here...
UsersController.js:130 undefined
UsersController.js:131 undefined

编辑:当我 console.log($scope.clientList) 时，没问题..数组中第一项的对象如下所示:

0:对象 $$hashKey:“对象:254” 客户编号:102 客户名称:“测试” _proto:对象

Answer 1

您无法访问属性，因为 client你从 ng-repeat 得到的是 string .

检查此Plunker的控制台日志我用你的代码创建的。你会看到第一个consol.log(client)实际上是打印出这个字符串:{"clientId":102,"clientName":"Testing 1"} 。因此，它没有任何属性。

来自select docs :

Note that the value of a select directive used without ngOptions is always a string. When the model needs to be bound to a non-string value, you must either explictly convert it using a directive (see example below) or use ngOptions to specify the set of options. This is because an option element can only be bound to string values at present.

考虑使用ngOptions指令而不是 <select>与 ng-repeat。