angularjs与服务器的值绑定

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陷入无限循环，并且站点崩溃。

对于如何以正确的方式TIA实现这一目标，我将不胜感激！

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;
 };