Angular使用数组值作为对象

Angular use array value for oject

本文关键字：对象 数组 Angular      更新时间：2023-09-26

所以我试图通过数组中的值设置一些对象值。

$scope.ngmodelfield = {};
$scope.categories = [{
  cat: "Cat 1a",
  translationTag: "OccupationalSafety"
}, {
  cat: "Cat 1b",
  translationTag: "IndustrialSafety"
}, {
  cat: "Cat 2",
  translationTag: "Growth"
}, {
  cat: "Cat 3",
  translationTag: "Modifications"
}, {
  cat: "Cat 4",
  translationTag: "Maintenance"
}, {
  cat: "Cat 5",
  translationTag: "Renewals"
}, {
  cat: "Cat 6",
  translationTag: "Environment"
}, {
  cat: "Cat 7",
  translationTag: "IT"
}, {
  cat: "Cat 8",
  translationTag: "ResearchAndDevelopment"
}, {
  cat: "Cat 9",
  translationTag: "LegalRequirements"
}];

我用下面的方法遍历这些对象:

  <div class="row" ng-repeat="cat in categories track by $index">
    <div class="col s12">
      <div class="col s4">
        {{cat.cat}}  - {{cat.translationTag}}
      </div>
      <div class="col s8">
        <textarea ng-model="ngmodelfield.[cat.translationTag]" class="materialize-textarea"></textarea>
      </div>
    </div>
  </div>

现在我想把第一个文本区域链接到ngmodelfield.OccupationalSafety，第二个链接到ngmodelfield.IndustrialSafety，以此类推。

但这似乎不起作用，如下所示:http://plnkr.co/edit/WKCLjzmLy1IrwEmQPMRH?p=preview

修改:

<div class="col s8">
    <textarea ng-model="ngmodelfield.[cat.translationTag]" class="materialize-textarea">{{cat.cat}}</textarea>
</div>

: 

<div class="col s8">
     <textarea ng-model="ngmodelfield[cat.translationTag]" class="materialize-textarea">{{cat.cat}}</textarea>
</div>

即去掉ng-model="ngmodelfield.[cat.translationTag]"中的圆点

在ngmodelfield中混合使用两种类型的对象属性表示法存在语法错误。删除<textarea>标签中的点会产生:

<textarea ng-model="ngmodelfield[cat.translationTag]" class="materialize-textarea"></textarea>

当想要在设计时未知的对象上动态创建新属性时，使用括号表示法，如上所述。当您事先知道对象的属性时，您可以使用点表示法引用它。

// this is the only change that you need to do
<textarea ng-model="ngmodelfield[cat.translationTag]" class="materialize-textarea">{{cat.cat}}</textarea>
相关文章：