访问 Angular.js 中的选定对象属性答案

【问题标题】：Access selected object property in Angular.js访问 Angular.js 中的选定对象属性
【发布时间】：2023-03-24 06:46:01
【问题描述】：

我是 angular 新手，我正在一起使用 angular.js 和 angular-material。

我要做的是创建一个 md-select 并将一个对象作为 ng-model 分配给它。我的 md-options 来自一个对象数组，当我选择所需的选项时，整个对象都存储在 ng-model 中。

问题是当我尝试选择这个对象的一个属性时，什么都没有返回。你可以在这里看到我的代码：

<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
      <md-select ng-model="orderItems[$index].item">
         <md-option ng-repeat="item in itemNames[$index] | orderBy: item.name" value="{{item}}">
           {{item.name}} - {{item.price | currency : 'R$' : 2}}
         </md-option>
       </md-select>
    </md-input-container>

    {{orderItems[$index].item.name}}

如果我只写 {{orderItems[$index].item}}，则访问整个对象，将其显示为对象及其属性，如下所示：

{"_id":"5812cfdb1c27a7187c61b8c1","price":"2","name":"水瓶 500ml"}

但是当我写的时候：

我无法访问对象的名称，没有任何显示。

我在这里做错了什么？？

谢谢！

【问题讨论】：

您可以尝试将更改为检查此 jsfiddle jsfiddle.net/2f6qscrp/196

标签： javascript angularjs

【解决方案1】：

您在 ng-repeat 中使用的 $index 不适用于父 md-select，因此您无法使用该数字索引您的 orderItems 数组。此外，根据 angular-material 文档，您不需要评估 value="{{item}}" 的 value 属性。

如果您只想将选择的值存储为对象，您可以这样做：

<md-input-container md-no-float class="md-block col-1111-20-0-fl mrg-l-20">
  <md-select ng-model="selectedItem">
    <md-option ng-repeat="item in itemNames | orderBy: item.name" ng-value="item">
      {{item.name}} - {{item.price | currency : 'R$' : 2}}
    </md-option>
  </md-select>
</md-input-container>

【讨论】：