使用过滤器来自$ http.get的值时出错

时间:2014-09-10 08:25:25

标签: angularjs angular-filters

我正在使用过滤器从转发器中提取id。一切正常但在控制台中我收到以下错误:

https://docs.angularjs.org/error/$interpolate/interr?p0=%7B%7BspecsList%20%7C%20splitIds%7D%7D&p1=TypeError:%20Cannot%20read%20property%20%27map%27%20of%20undefined

如果我将 $http.get 替换为 specsList 的静态值,则没有错误。如何以一种好的方式绕过它?

JS:

app.controller('SpecsController', function ($scope, $http) {
    $scope.$on('$viewContentLoaded', function(event) {
      $http.get('getSpecs.aspx')
          .then(function(result) {
            $scope.specsList = result.data.specs;
          })
          .catch(function(err) {
            console.log(err);
          });
    });

    $scope.sortableOptions = {
        handle: "> .position",
        helper: function (e, ui) {
              var originals = ui.children();
              var clonedHelper = ui.clone();
              clonedHelper.children().each(function(index) {
                 //$(this).width($(this).width());
                 $(this).width(originals.eq(index).outerWidth());
                 $(this).addClass("dragging");
                 $(this).parent().addClass("dragging_tr");
              });
              return clonedHelper;
        },
        update: function(e, ui) {
            //console.log("update");
        },
        stop: function(e, ui) {
            //Save sortorder
        }
    };
});

app.filter('splitIds', function() {
  return function(ArrayWithIds) {
      return ArrayWithIds.map(function(item){return item.id;}).join();
  };
});

HTML:

<input type="text" value="{{specsList | splitIds}}" />

2 个答案:

答案 0 :(得分:0)

由于要求退回承诺,您需要将$http.get('getSpecs.aspx')更改为return $http.get('getSpecs.aspx')

答案 1 :(得分:0)

好的,这应该可以解决您的问题:

app.filter('splitIds', function() {
  return function(ArrayWithIds) {          
      return (angular.isUndefined(ArrayWithIds) || !angular.isArray(ArrayWithIds))?
                "":
                ArrayWithIds.map(function(item){return item.id;}).join();
  };
});

正在发生的事情是第一次调用过滤器splitIds $scope.specsList尚不存在。