如何在AngularJS中查找值并在HTML表中显示数据

How to look up a value in AngularJS and display data in HTML table

本文关键字：HTML 显示 数据 查找 AngularJS      更新时间：2023-09-26

我目前正在从restul GET调用返回JSON数据集。第一个响应集用于构建HTML数据表。其中一个值是来自数据库中数据表的数字ID。

在另一组JSON数据中，是一组值，这些值对应于第一个数据集中的数字id值。

我正试图在第一组中的数值的基础上查找第二组中的值。

我已经能够使用标记和ng选项来实现这一点，但这个特定的列只需要是一个带有数据值的静态标记。

我的标签看起来像

<td><select id="basOrgs" class="form-control grid-input" ng-model-options="{updateOn: 'blur'}" ng-model="item.OrgUid" ng-options="org.OrganizationUid as org.OrganizationDisplay for org in Orgs"></select></td>

我试图实现的是使用模型项。OrgUid在Orgs数据集中查找一个值，以显示基于项目的Orgs.OrganizationDisplay。OrgUid值。

我尝试了ng重复，但没有成功。

<td ng-model="item.OrgUid" ng-repeat="org in Orgs track by org.OrganizationUid">{{org.OrganizationDisplay}}</td>

项目模型看起来像{OrgUid: 123456, Active:'Y', StartDate'｝组织模型看起来像"｛OrgUid:123456，OrgDisplay:"组织名称"｝

我想做的是在基于项目的标记中显示OrgDisplay值。OrgUid值。

如有任何帮助，我们将不胜感激。

谢谢，--Jim

假设控制器中有$scope.orgs，如何

<td ng-model="item.OrgUid" ng-repeat="org in Orgs track by org.OrganizationUid">{{lookup[org.OrganizationUid].OrganizationDisplay}}</td>

我会编辑它以包含正确的查找代码，但这就是我的想法。

你可以制作一个查找对象来促进这一点：

var lookup = {};
for (var i = 0, len = orgs.length; i < len; i++) {
    lookup[array[i].OrganizationUid] = array[i];
}

下面是一个使用两个"数据集"之间查找的工作片段。

var myApp = angular.module('myApp', []);
myApp.controller('myController',
  function($scope) {
    $scope.Orgs = [{
      OrgUid: 1,
      OrgDisplay: 'Org 1'
    }, {
      OrgUid: 2,
      OrgDisplay: 'Org 2'
    }, {
      OrgUid: 3,
      OrgDisplay: 'Org 3'
    }];
    $scope.Items = [{
      OrgUid: 1,
      Active: 'Y',
      StartDate: "12/1/1984"
    }, {
      OrgUid: 2,
      Active: 'Y',
      StartDate: "12/1/1984"
    }, {
      OrgUid: 3,
      Active: 'Y',
      StartDate: "12/1/1984"
    }];
    $scope.lookup = {};
    for (var i = 0, len = $scope.Orgs.length; i < len; i++) {
      $scope.lookup[$scope.Orgs[i].OrgUid] = $scope.Orgs[i];
    }
  });
.item {
  border:1px solid green; 
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myApp" ng-controller="myController"> 
  
<body>
  <span class="item" ng-model="item.OrgUid" ng-repeat="item in Items">{{lookup[item.OrgUid].OrgDisplay}}</td>
  </body>
</html>

相关文章：