Question

我正在创建一个包含产品信息的表。

对于每一行，我都有一个包字段。系统要求包的信息作为json文件存储在服务器上。

我想要做的是在每行的ngRepeat中查询服务器并将返回的值绑定到td。

我有一组产品用于表格，表格是这样创建的：

<tr ng-repeat="product in products">
    <td>{{product.value}}</td>
    <td>{{product.name}}</td>
    <td>{{getPackageNameById(product.package)}}</td>
</tr>

getPackageNameById函数通过服务向服务器发出请求，并返回包对象

功能：

$scope.getPackageNameById = function(packageId){
      Packages.getPackageById(packageId)
      .then(function (components) {
        console.log(components); // THIS WORKS, I SEE THE RETURNED PACKAGE OBJECT
        return components;
      }, function (error) {
        console.error(error);
      });
    };

服务：

factory('Packages', function ($q, $http) {
    return {
      getPackageById: function (packageId) {
        var deferred = $q.defer(),
          httpPromise = $http.get('/packages/'+packageId);

        httpPromise.success(function (components) {
          deferred.resolve(components);
        })
          .error(function (error) {
            console.error('Error: ' + error);
          });

        return deferred.promise;
      },
    };
  });

问题是getPackageNameById进入无限循环并且网站崩溃。

我非常感谢有关如何以正确的方式实现这一目标的任何建议！

Answer 1

两件事：

<td>{{getPackageNameById(product.package)}}</td>

我认为Angular双向数据绑定对函数调用

不起作用

$scope.getPackageNameById()

不返回值

因此，使用属性进行数据绑定：

<tr ng-repeat="product in products">
    <td>{{product.value}}</td>
    <td>{{product.name}}</td>
    <td>{{product.packageValue.value}}</td>
</tr>

获取所有产品的信息：

angular.forEach($scope.products, function(product) {
  product.packageValue = $scope.getPackageNameById(product.package);
});

定义“类”以创建新对象引用

var Package = function(){
    return {
        value: 0
    };
}

并正确返回值

$scope.getPackageNameById = function(packageId){
   var packageValue = new Package();
   Packages.getPackageById(packageId)
   .then(function (components) {
     packageValue.value = components;
   }, function (error) {
     console.error(error);
   });
   return packageValue;
 };

angularjs与来自服务器的值绑定

1 个答案: