Angular将特定数据检索到$ scope变量中不起作用 [英] Angular retrieve specific data into $scope variable is not working

查看:118
本文介绍了Angular将特定数据检索到$ scope变量中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在这里初始化

 $scope.statuses = [];

然后,如果我只是简单地将$ http.get中的数据设置为$ scope变量,那是可以的,但我需要对其进行更多过滤.

Then if I simply set the data from $http.get to the $scope variable, that "works" but I need to filter it down more.

$scope.statuses = result.data.Devices; 
console.log($scope.statuses);

这将在开发工具控制台输出中返回这样的数据数组

That returns the array of data like this in dev tools console output

0:对象 $$ hashKey : 对象:5" 援助 : "oAAABTUAAg ==" DKiIndex : "DKi00000002" DefaultPayload : "C:\ ProgramData \" 设备ID : "00022B9A000000010001" 设备状态 : 3 清单编号清单 : 数组[3] PendingManifestId : 空值 待处理时间戳 : "0001-01-01T00:00:00" 沙 : "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us =" StagedManifestIdList : 数组[0]

0: Object $$hashKey : "object:5" Aid : "oAAABTUAAg==" DKiIndex : "DKi00000002" DefaultPayload : "C:\ProgramData\" DeviceId : "00022B9A000000010001" DeviceStatus : 3 ManifestIdList : Array[3] PendingManifestId : null PendingTimeStamp : "0001-01-01T00:00:00" Sha : "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=" StagedManifestIdList : Array[0]

但是我只想要一些特定数据

However I only WANT some specific data

$scope.statuses = result.data.Devices.DeviceStatus;

为什么说未定义",我该怎么做?

Why does it say 'undefined' and how do I do this?

所以0:对象DeviceStatus在那..:/

So 0: Object DeviceStatus is there.. :/

<div ng-app="app" ng-controller="DeviceController as vm">


...
        <tr ng-repeat="device in vm.devices">
             <td>{{device.DeviceId}}</td>
             <td>{{device.DeviceStatus}}</td>
             <td>{{device.Aid}}</td>
             <td>{{device.Sha}}</td>
        </tr>
...

基本上,我希望先将Javascript/angular(.js)中的数据处理到ng-repeat循环中

Essentially I wish to manipulate the data in Javascript /angular (.js) before it makes it to the ng-repeat loop

因此,$ scope甚至是使用正确的东西吗?

Thus is $scope even the proper thing to even be using?

例如,我知道有些数据需要更改

I know that I have some data to change for example

字段中的某些数据用[]括起来,例如[01,02,03]这样做 {{device.aid.join(',')}}将解决" []问题,但我需要具有这样的功能?我在哪里可以使用?

Some data in a field was surrounded by [] e.g. [01,02,03] so doing {{ device.aid.join(',') }} would "fix" the [] issue but i need to have some function like this? where can i use this?

// usage {{displayArchived(item.archives)}}
$scope.displayArchived = function(archives){
    return (archives.length > 0) ? archives.join(',') : 'none';
};

然后会帮助"查看DeviceStatus的数量吗?

Then will a "let" help for numbers of DeviceStatus?

  let statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];

推荐答案

在这种情况下,result.data.Devices是一个对象数组,看起来像这样:

In this instance, result.data.Devices is an array of objects that looks something like this:

[
   {DeviceId : "00022B9A000000010001" DeviceStatus : 3 .... },
   {DeviceId : "00022B9A000030011111" DeviceStatus : 9 ...},
   ....
]

因此,当您尝试获取result.data.Devices.DeviceStatus时,没有名为DeviceStatus的数组元素,这就是为什么要返回undefined的原因.

So when you try to get result.data.Devices.DeviceStatus, there is no array element called DeviceStatus, which is why you are getting back undefined.

您将需要遍历设备阵列以获取特定设备的DeviceStatus:

You will need to iterate through the array of Devices to get a specific Device's DeviceStatus:

angular.forEach(result.data.Devices, function(value, index){
           $scope.statuses.push(value.DeviceStatus);
         });

,或者,如果知道所需设备,则可以直接访问:

or you can access directly if you know which device you want:

var index = 1;
$scope.statuses = result.data.Devices[index].DeviceStatus;

如果要获取所有设备并在模板中显示{{device.DeviceStatus}},请使用以下解决方案:

If you want to get all of the devices and display {{ device.DeviceStatus }} with your template, here is a solution:

代码:

$scope.devices = result.data.Devices;

模板:

<div ng-repeat="device in devices">
    {{ device.DeviceStatus }} 
</div>

在我们的代码中,我们将request.data.Devices数组分配给$scope.devices.然后在模板中,我们使用ng-repeat浏览$scope.devices中的每个device,并显示设备的DeviceStatus.

In our code, we assign the request.data.Devices array to $scope.devices. Then in the template, we use ng-repeat to go through each device in $scope.devices and display the device's DeviceStatus.

为了使DeviceStatus与其实际名称匹配,您可以创建一个自定义过滤器.

In order to match the DeviceStatus to it's actual name, you can create a custom filter.

在代码中创建过滤器:

app.filter('deviceStatus', function () {
  return function (status_id) {
      var statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
      return statuses[status_id];
  };
});

您现在可以在模板中使用新的过滤器:

You can use the new filter in your template now:

<td>{{device.DeviceId | deviceStatus}}</td>

我们将DeviceId用管道传输到自定义的deviceStatus过滤器中,以便在模板中获取正确的状态名称.

We pipe the DeviceId into our custom deviceStatus filter in order to get the correct status name in the template.

这篇关于Angular将特定数据检索到$ scope变量中不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆