Javascript 如何使用ng repeat遍历使用动态键关联的数组_Javascript_Angularjs_Json_Angularjs Directive_Angularjs Ng Repeat

Javascript 如何使用ng repeat遍历使用动态键关联的数组

javascript angularjs json

Javascript 如何使用ng repeat遍历使用动态键关联的数组,javascript,angularjs,json,angularjs-directive,angularjs-ng-repeat,Javascript,Angularjs,Json,Angularjs Directive,Angularjs Ng Repeat,我试图使用ng repeat遍历对象数组，并使用每个对象ID查找绑定到清单模型的数据。我正在处理的项目中有以下javascript对象： { diagnosis: { mainfractures: [ { id: "metacarpal", textinput_id: "metacarpal_text",

我试图使用ng repeat遍历对象数组，并使用每个对象ID查找绑定到清单模型的数据。我正在处理的项目中有以下javascript对象：

{
diagnosis: {
            mainfractures: [
                        {
                            id: "metacarpal",
                            textinput_id: "metacarpal_text",
                            title: "5th Metacarpal",
                        },
                        {
                            id: "proximal_phalanx",
                            textinput_id: "proximal_phalanx_text",
                            title: "Proximal Phalanx",
                        },
                        {
                            id: "middle_phalanx",
                            textinput_id: "middle_phalanx_text",
                            title: "Middle Phalanx",
                        },
                        {
                            id: "distal_phalanx",
                            textinput_id: "distal_phalanx_text",
                            title: "Distal Phalanx",
                        },
                        {
                            id: "scaphoid_fracture",
                            textinput_id: "scaphoid_fracture_text",
                            title: "Scaphoid Fracture",
                        }
          ]
   }}

以下是我的清单模型。当用户选中复选框时，一个值绑定到与该断开关联的数组

$scope.checklists = {
                    "diagnosis": {
                         metacarpal: [],
                         proximal_phalanx: [],
                         middle_phalanx: [],
                         distal_phalanx: [],
                         scaphoid_fracture: []
                    }
                }

一旦用户做出了类似于上面图像的选择，掌骨检查表模型应该如下所示：掌骨：[“头”]

我想做的是通过breake.id在bulletpoint中列出每个用户选择。我试图用这段代码来完成它，但到目前为止，它只列出了断裂的标题。尝试将fracture.id插入ng repeat是否有问题

<div ng-repeat="fracture in diagnosis.mainfractures">
          <div > <!--ng-if="checklists['diagnosis'][fracture.id] > 0"-->
            <h4>{{ fracture.title }}</h4>
            <div class="row">
              <ul type="disc">
                <li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
                  &bull; {{ capitalize(selection) }}
                </li>
              </ul>
            </div>
        </div>
      </div>


{{breake.title}}


&公牛；{{大写（选择）}

稍微调整了代码：

大写-> 大写（）
一些语法错误

但通过ng repeat中的动态对象键进行访问似乎是非常正确的

角度应用

var app = angular.module('arrayid', []);

app.controller('arrayContainerCtrl', function($scope) {
  $scope.diagnosis = {
    mainfractures: [{
      id: "metacarpal",
      textinput_id: "metacarpal_text",
      title: "5th Metacarpal",
    }, {
      id: "proximal_phalanx",
      textinput_id: "proximal_phalanx_text",
      title: "Proximal Phalanx",
    }, {
      id: "middle_phalanx",
      textinput_id: "middle_phalanx_text",
      title: "Middle Phalanx",
    }, {
      id: "distal_phalanx",
      textinput_id: "distal_phalanx_text",
      title: "Distal Phalanx",
    }, {
      id: "scaphoid_fracture",
      textinput_id: "scaphoid_fracture_text",
      title: "Scaphoid Fracture",
    }]
  };

  $scope.checklists = {
    "diagnosis": {
      metacarpal: ['1', '2'],
      proximal_phalanx: ['2', '3'],
      middle_phalanx: ['3'],
      distal_phalanx: ['4'],
      scaphoid_fracture: ['5']
    }
  };

});

标记：

<body ng-app='arrayid' ng-controller='arrayContainerCtrl'>
  <div ng-repeat="fracture in diagnosis.mainfractures">
      <h4>{{ fracture.title }}</h4>
      <div class="row">
        <ul type="disc">
          <li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
            &bull; {{ selection | uppercase }}
          </li>
        </ul>
      </div>
  </div>
</body>


{{breake.title}}


&公牛；{{选择|大写}}

稍微调整了代码：

大写-> 大写（）
一些语法错误

但通过ng repeat中的动态对象键进行访问似乎是非常正确的

角度应用

var app = angular.module('arrayid', []);

app.controller('arrayContainerCtrl', function($scope) {
  $scope.diagnosis = {
    mainfractures: [{
      id: "metacarpal",
      textinput_id: "metacarpal_text",
      title: "5th Metacarpal",
    }, {
      id: "proximal_phalanx",
      textinput_id: "proximal_phalanx_text",
      title: "Proximal Phalanx",
    }, {
      id: "middle_phalanx",
      textinput_id: "middle_phalanx_text",
      title: "Middle Phalanx",
    }, {
      id: "distal_phalanx",
      textinput_id: "distal_phalanx_text",
      title: "Distal Phalanx",
    }, {
      id: "scaphoid_fracture",
      textinput_id: "scaphoid_fracture_text",
      title: "Scaphoid Fracture",
    }]
  };

  $scope.checklists = {
    "diagnosis": {
      metacarpal: ['1', '2'],
      proximal_phalanx: ['2', '3'],
      middle_phalanx: ['3'],
      distal_phalanx: ['4'],
      scaphoid_fracture: ['5']
    }
  };

});

标记：

<body ng-app='arrayid' ng-controller='arrayContainerCtrl'>
  <div ng-repeat="fracture in diagnosis.mainfractures">
      <h4>{{ fracture.title }}</h4>
      <div class="row">
        <ul type="disc">
          <li ng-repeat="selection in checklists['diagnosis'][fracture.id]">
            &bull; {{ selection | uppercase }}
          </li>
        </ul>
      </div>
  </div>
</body>


{{breake.title}}


&公牛；{{选择|大写}}

根据您提供的代码，我不得不说您的问题实际上是由于JS语法错误造成的。每个对象项后都缺少逗号，此处有一个随机双引号

舟状骨骨折“[]

$scope.checklists = {
                "diagnosis": {
                     metacarpal: []
                     proximal_phalanx: []
                     middle_phalanx: []
                     distal_phalanx: []
                     scaphoid_fracture"[]
                }
            }

根据您提供的代码，这是一个完全有效的

，我不得不说您的问题实际上是由于JS语法错误造成的。您在每个对象项后都缺少逗号，并且这里有一个随机双引号舟状骨骨折“[]

$scope.checklists = {
                "diagnosis": {
                     metacarpal: []
                     proximal_phalanx: []
                     middle_phalanx: []
                     distal_phalanx: []
                     scaphoid_fracture"[]
                }
            }

这是一个完全工作的

我很困惑，根据你的数据集，没有“头”。这意味着检查表['diagnosis']['head']将未定义。您可能会做一些类似于检查表['diagnosis']['掌骨']的事情，头部不会出现未定义，因为我没有粘贴到完整的模型中。我要做的是迭代诊断属性及其对应的数组，然后显示每个元素。我正试图用“fracture.id”来完成这个任务。对不起，如果我不清楚，请检查我的答案。如果问题不是由于语法错误造成的，那么请使用检查“头”或“颈”时执行的代码更新您的问题。我很困惑，根据您的MainFracts数据集，没有“头”。这意味着检查表['diagnosis']['head']将未定义。您可能会做一些类似于检查表['diagnosis']['掌骨']的事情，头部不会出现未定义，因为我没有粘贴到完整的模型中。我要做的是迭代诊断属性及其对应的数组，然后显示每个元素。我正试图用“fracture.id”来完成这个任务。对不起，如果我不清楚，请检查我的答案。如果问题不是由于语法错误造成的，那么请使用检查“头”或“脖子”时执行的代码更新您的问题。这说明了如何使用ng repeat，但我认为这实际上不能满足他所述的显示用户选择的目标。这说明了如何使用ng repeat，但我认为这并不能满足他所说的显示用户选择的目标。