输入链接到 ng-repeat AngularJS 和 Play Scala 框架答案

【问题标题】：Input link into ng-repeat AngularJS and Play Scala Framework输入链接到 ng-repeat AngularJS 和 Play Scala 框架
【发布时间】：2021-03-30 19:16:03
【问题描述】：

我有一个 ng-repeat，我在其中显示产品信息，我想为每个单独的产品显示一个外部 url，以在亚马逊上显示。下面的产品 url、名称、storeFrontPrice 和 oneline 属性都从 MySQL 数据库正确加载到页面。代码目前看起来像（用于查询的 ng-model 在包含的代码上方）：

<div ng-repeat="product in filteredProducts = (products | filter:query)" class="col-xs-12 col-sm-6 col-md-3">
            <div class="item-in-grid">
               <a ui-sref="base.index.products.detail({url:product.url, selectedProduct:product})">
                  <div class="product-hover"> <!-- trick to allow us to highlight background on hover -->
                     <!-- picture -->
                     <img ng-src="products/{{product.url}}/image" class="img-responsive center-block" alt="Qwik CO"/>
                     <!-- description -->
                     <div class="item-description-section">
                        <h3>{{product.name}}</h3>
                        <p class="item-description">
                           {{product.oneline}}
                        </p>
                     </div>
                     <div class="item-price">
                     {{product.storeFrontPrice | currency}}

但是当我尝试将标签更改为此：

<a ng-href="{{amazonurl}}">

或

<a href="{{amazonurl}}">

屏幕上没有任何显示。我没有收到任何错误，控制台中也没有任何内容。我知道仅基于出现的其他数据以及我可以在 MySQL db 中编辑价格并反映对数据库的调用正在发生的变化这一事实。我查看了示波器，它看起来应该也可以工作：

(function() {
   'use strict';
   angular.module('app').controller('productsController', productsController);
   productsController.$inject = ['$scope', 'Product', 'pageHeaderService'];
   function productsController($scope, Product, pageHeaderService) {
      pageHeaderService.setHeaderInfo({title: "XXXXX", desc: "Below are products that you can use in your home", visible: true});
      $scope.query = "";
      $scope.products = [];
      $scope.loading = true;
      Product.enabledProducts({}, function(response) {
         $scope.products = response;
         $scope.loading = false;
      },
      function(error) {
         $scope.err = error;
         $scope.loading = false;
      });

      $scope.clearFilter = function() {
         if ($scope.query) {
            $scope.query = "";
         }
      };
   }
})();

看起来它只是将来自服务器的响应推送到产品数组中，我假设 amazonurl 列与其他选项一样可用。我检查以确保在 application.conf 中设置了数据库连接并且它看起来是正确的，并且它指向对服务器上似乎正在提供此信息的另一个位置的调用（将某些信息更改为 x 以使其模糊, 但这些名字都是一样的):

db.default.driver="com.mysql.jdbc.Driver"
db.default.url="jdbc:mysql://localhost/xxxx"
db.default.username="xxxx"
db.default.password="xxxx"

db.default.partitionCount=1
db.default.minConnectionsPerPartition=1
db.default.maxConnectionsPerPartition=5

db.default.acquireIncrement=1
db.default.acquireRetryAttempts=1
db.default.acquireRetryDelay=5 seconds


db.default.queryExecuteTimeLimit=1 second

jdbc-execution-context {
   fork-join-executor {
      parallelism-min = 1
      parallelism-max = 5
      parallelism-factor = 1.0
   }
}

mec.central.endpoint="http://localhost:9010"

该目录的 application.conf 文件似乎也已正确设置：

http.port=9010


application.langs="en"


db.default.driver="com.mysql.jdbc.Driver"
db.default.url="jdbc:mysql://localhost/mec_store?serverTimezone=UTC"
db.default.username="mec_store"
db.default.password="mec_store"


db.default.partitionCount=1
db.default.minConnectionsPerPartition=1
db.default.maxConnectionsPerPartition=5

db.default.acquireIncrement=1
db.default.acquireRetryAttempts=1
db.default.acquireRetryDelay=5 seconds


db.default.queryExecuteTimeLimit=1 second

jdbc-execution-context {
   fork-join-executor {
      parallelism-min = 1
      parallelism-max = 5
      parallelism-factor = 1.0
   }
}

我通过进入数据库服务器上的 mysql 控制台检查了数据库，并确保选择该表返回了我的 amazonurl 列，并且确实如此。在该端口 9010 位置上，似乎为产品设置了模型：

@Entity
@JsonInclude(Include.NON_NULL)
@Table(name="product")
public class Product extends AbstractModel {

   @Column(name="name", length=128, nullable=false)
   private String name;
   
   @ManyToOne(optional=false)
   @JoinColumn(name="store_front_id", nullable=false)
   private StoreFront storeFront;
   
   @Column(name="stock_id", length=16, nullable=false)
   private String stockId;
   
   @Column(name="url", length=256)
   private String url;
   
   @Column(name="price", precision=10,scale=2, nullable=false)
   private BigDecimal cost;
   
   @Column(name="price_augment", precision=10,scale=2, nullable=false)
   private BigDecimal priceAugment;
   
   @Transient
   private BigDecimal storeFrontPrice;
   
   @Column(name="description", length=1000, nullable=false)
   private String description;
   
   @Column(name="oneline", length=256, nullable=false)
   private String oneline;
   
   @Column(name="spec", length=1000, nullable=false)
   private String spec;

   @Column(name="enabled", nullable=false)
   private boolean enabled = false;
   
   @Column(name="hazardous", nullable=false)
   private boolean hazardous = false;
   
   @Column(name="weight", length=10, nullable=true)
   private String weight = "0";

   @JsonIgnore
   private String dimensions = "0";
   
   @Transient
   private List<ProductHistory> productHistories;
   
   @Transient
   @JsonIgnore
   private Dimensions dimension;
   
   @Column(name="modifier", nullable=false)
   @JsonIgnore
   private double modifier;

   private static Finder<Long, Product> finder = new Finder<Long, Product>(Long.class,
         Product.class);

   public static List<Product> findAllProducts() {
      return finder.all();
   }

如果您遵循通过控制器的路线，您可以在上面看到的对 mec.central.endpoint 的 api 调用中访问该函数。作为一名开发人员，我正在承担第三手的责任，所以我对这个 Play 框架不是很熟悉，而且它似乎没有得到大力支持/使用。我相信这是调用 api 并将此信息从端口 9010 传递到 9000，因为第一个站点目录中不存在此 model.java 文件。我是否需要将 amazonurl 添加到此模型才能在该站点上使用它？

【问题讨论】：

标签： mysql angularjs playframework

【解决方案1】：

未来任何人的答案都是肯定的，该模型文件需要包含从已识别的数据库中提取的信息以及通过 UI 执行时创建和更新 amazonurl 字符串的方法。

【讨论】：