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

Question

I currently am getting to sets of JSON data back from a restul GET call. 我目前正在从restul GET调用返回JSON数据集。 The first response set is used to build a HTML table of data. 第一个响应集用于构建HTML数据表。 One of those values is an numeric ID from a data table in the DB. 这些值之一是数据库中数据表中的数字ID。

In the other set of JSON data is a set of the values that correspond to the numeric id value in the first data set. 在另一组JSON数据中，是与第一组数据中的数字id值相对应的一组值。

I'm trying to look up a value in the second set, based on the numeric value in the first set. 我正在尝试根据第一组中的数值查找第二组中的值。

I've been able to accomplish this using a tag and ng-options, but this particular column need to just be a static tag with a data value. 我已经可以使用tag和ng-options完成此操作，但是此特定列只需是带有数据值的静态标签即可。

My tag looks like 我的标签看起来像

<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>

What I'm trying to accomplish is to use the model item.OrgUid to look up a value in the Orgs data set to display Orgs.OrganizationDisplay based on the item.OrgUid value. 我要完成的工作是使用模型item.OrgUid在Orgs数据集中查找一个值，以基于item.OrgUid值显示Orgs.OrganizationDisplay。

I've experimented with ng-repeat without any success. 我已经尝试了ng-repeat，但没有成功。

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

The item model looks like {OrgUid: 123456, Active:'Y', StartDate'} The Org model looks like '{OrgUid: 123456, OrgDisplay: 'The Name of the Org'} 项目模型看起来像{OrgUid: 123456, Active:'Y', StartDate'} Org模型看起来像'{OrgUid：123456，OrgDisplay：'组织的名称'}

What I would like to do is display the OrgDisplay value in the tag based on the item.OrgUid value. 我想做的是基于item.OrgUid值在标签中显示OrgDisplay值。

Any help would be appreciated. 任何帮助，将不胜感激。

Thanks, --Jim 谢谢-吉姆

Answer 1

Assuming you have $scope.orgs in your controller, how about 假设您的控制器中有$scope.orgs ，如何

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

I'll edit this to include the right lookup code, but this is the idea. 我将对其进行编辑以包括正确的查找代码，但这就是想法。

You could make a lookup object to facilitate this: 您可以创建一个查找对象来简化此操作：

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

Here is a working snippet that uses lookup between two "data sets". 这是一个在两个“数据集”之间使用查找的有效代码段。

 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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-23 16:23:33

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-23 16:23:33

解决方案1
0 已采纳 2015-11-23 16:23:33