在AngularJS中编辑JSON响应并绑定到列表

时间:2014-04-14 04:33:25

标签: json angularjs angularjs-ng-repeat

嗨,我知道如何读取表单json并将输出绑定到视图但是我想在输出中添加一些逻辑并转换出已转换的数据。如何将我的forEach输出到数组,而不是基于它进行ng-repeat或将我的ajax数据绑定与我的修正结合起来?

目前如果我改变

$ scope.fleet = newData; => $ scope.fleet = data;

和view.html例如。 {{item.name}}一切正常,但我想在绑定之前对名称添加一些更改。

我的代码:

controler.js

function LoadFleetControler($scope){
$.ajax({
  url: 'https://someapi/list',
  type: 'GET',
  dataType: 'json',
  success: function (data) {

  var newData = [];

  angular.forEach(data, function(value, key){

  /* ############################ Options ############################ */

  var d = new Date();
  var month = d.getMonth() + 1;
  var thisDate = d.getDate() + '/' + padLeft(month,2)  + '/' + d.getFullYear();
  var thisCycle = dateToDays(thisDate, value.end_bill_date) + 1; // Include last 24H


   /* ############################ Scope ############################ */


   $scope.fleetUser = value.name;
   $scope.fleetCycle = 'Cycle: ' + thisCycle + ' days left (' + value.end_bill_date + ')';
   $scope.fleetPercentageUsed = value.percentage_used;
   $scope.fleetCycleColor = highlighSwitch(value.percentage_used);

}, newData);

console.log(newData);

$scope.fleet = newData;
$scope.$apply();

},
error: function(data) {

$scope.error = true;
$scope.$apply();

}
});  

}

view.html

<div ng-controller="LoadFleetControler">
<ons-list>
<ons-list-item ng-show="error">Server Connection Error</ons-list-item>
<ons-list-item class="topcoat-list__item__line-height" ng-repeat="item in fleet">
{{fleetUser}}
<small>{{fleetCycle}}</small>
</ons-list-item>
</ons-list>
</div>

1 个答案:

答案 0 :(得分:0)

angular.forEach()内部,当你可能想要创建新对象并将它们添加到newData数组时,你正在为作用域分配项目......

angular.forEach(data, function(value, key){

        // ...

        var newItem = {};
        newItem.fleetUser = value.name;
        newItem.fleetCycle = 'Cycle: ' + thisCycle + ' days left (' + value.end_bill_date + ')';
        newItem.fleetPercentageUsed = value.percentage_used;
        newItem.fleetCycleColor = highlighSwitch(value.percentage_used);

        newData.push(newItem);
    }
);