AngularJS - ng-init 不适用于 $resource 和 ng-repeat

AngularJS - ng-init not working with $resource and ng-repeat

本文关键字:resource ng-repeat 适用于 ng-init 不适用 AngularJS      更新时间:2023-09-26

大家下午好,因为我还没有找到任何解决我的问题的方法,我在这里=X 这是交易:我正在尝试使用 ng-init 调用函数启动 ng 模型,但在此函数中,我使用自定义$resource方法。现在问题来了,ng-init 不会等待承诺被解析来为模型分配值,它会直接传递它,并且由于承诺未解决,因此分配给它未定义。以下是代码:

带有输入和 ng-repeat的 Html:

<tr ng-form="itemsForm" ng-repeat="item in items">
                <td>
                  <div class="has-feedback"
                    ng-class="{
                        'has-error': itemsForm.product.$invalid && itemsForm.product.$dirty,
                      'has-success': itemsForm.product.$valid   && itemsForm.product.$touched
                    }">
                    <input type="text" typeahead-editable="false" typeahead-min-length="3" typeahead-no-results="noResultsProduct" required name="product" placeholder="Digite o codigo ou Descrição" class="form-control input-sm" id="product" typeahead-on-select="item.prod_code = product.codigo; updateFields(product)" ng-model="product" ng-init="product=item.prod_code; product=find_product(item.prod_code)" uib-typeahead="product as (product.descricao + ' - ' + product.codigo) for product in getProducts($viewValue) | orderBy:'descricao' | limitTo:15"/>
                    <p class="help-block" ng-messages="itemsForm.product.$error">
                      <span ng-message="required">Produto não informado.</span>
                      <span ng-if="noResultsProduct">Nenhum Produto encontrada.</span>
                    </p>
                  </div>
                </td>

ng-init 调用的函数:

$scope.find_product = function(product) {
  if (product != null){
    console.log("Started");
    ProductService.find_by($scope.company_id,product).$promise.then(function(data) {
      console.log(data.products);
      return data.products;
    });
    console.log("Finished");
  }
}

服务职能:

angular.module("application").service('ProductService',['$resource','$http', function($resource,$http){

this.products = function(company_id, search_filter){
  var services_product = $resource('/services_product/all',
                           {},
                           { "all": { "method": "POST" }});
  return services_product.all({"company_id": company_id, "search_filter": search_filter});
};
this.find_by = function(company_id, search_filter){
  var services_product = $resource('/services_product/find_by',
                           {},
                           { "find_by": { "method": "POST" }});
  return services_product.find_by({"company_id": company_id, "search_filter": search_filter});
};

}]);

控制台中正在打印的内容:

Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:120 Started
document_nfe_reception_controller.js?body=1:125 Finished
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000028        ", descricao: "57 - PRENSA CABO STECK BSP- 1/2 - COD.                                          ", tipo: "MP", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000028        ", descricao: "57 - PRENSA CABO STECK BSP- 1/2 - COD.                                          ", tipo: "MP", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000022        ", descricao: "61 - VIGA PINUS 2 POL X 1 POL - 4M                                              ", tipo: "EM", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "10000105       ", descricao: "61 - TABUA PINUS 3 POL X 20MM - 4000MM                                          ", tipo: "EM", unidade: "PC"…}
document_nfe_reception_controller.js?body=1:122 Object {filial: "01  ", codigo: "1000033        ", descricao: "CABO CONTROLE VEIAS NUMER.CL5 6X1,5 MM  1 KV                                    ", tipo: "MP", unidade: "MT"…}

我正在处理 5 个项目,如您所见,他仅在执行所有内容后获取数据。感谢任何帮助=))

与其在 promise 回调中返回 "data.products",不如将 data.products 分配给 item.product。

$scope.find_product = function(item) {
    if (product != null){
        console.log("Started");
        ProductService.find_by($scope.company_id,item.prod_id).$promise.then(function(data) {
            console.log(data.products);
            item.product = data.products;
        });
        console.log("Finished");
    }
}

.HTML

<input type="text" typeahead-editable="false" typeahead-min-length="3" typeahead-no-results="noResultsProduct" required name="product" placeholder="Digite o codigo ou Descrição" class="form-control input-sm" id="product" typeahead-on-select="item.prod_code = product.codigo; updateFields(product)" ng-model="item.product" ng-init="find_product(item)" uib-typeahead="product as (product.descricao + ' - ' + product.codigo) for product in getProducts($viewValue) | orderBy:'descricao' | limitTo:15"/>