Angular将特定数据检索到$ scope变量中不起作用 [英] Angular retrieve specific data into $scope variable is not working
问题描述
我在这里初始化
$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屋!