Question

我目前正在开发一个 spring MVC 项目，我有一个JSP方法，用一个页面显示数据库中的所有项目。

我想从使用 JSP 更改为 Angular MVVC 类型的模型，以便在商店中搜索产品。

<c:forEach items="${products}" var="p">
            <c:if test="${p.quantity > 0}">
                <div class="col-sm-6 col-md-3">
                       <div class="thumbnail">
                        <img src="photoProd?idProd=${p.idProduct}" class="img-responsive" />
                        <ul class="gridder">
                            <li class="gridder-list" data-griddercontent="#gridder-content-${p.idProduct}"></li>
                        </ul>
                        <div class="caption itemDiv" id="PRODDIV-${p.idProduct}">
                            <ul class="gridder">
                                <li class="gridder-list"
                                    data-griddercontent="#gridder-content-${p.idProduct}">
                                    <h4>${p.productName}</h4>
                                </li>
                                <li>Price: <small class="pull-right">NGN
                                        ${p.price}</small></li>
                            </ul>
                            <button class="btn btn-primary" id="BTN-${p.idProduct}">Add to Cart</button>
                            <!-- <a href="#" class="btn btn-default pull-right" role="button">Details</a> -->
                            </p>
                        </div>
                    </div>
                </div>
                <c:forEach items="${categories}" var="c">
                    <div id="gridder-content-${p.idProduct}" class="gridder-content">
                        <div class="row">
                            <div class="col-sm-6">
                                <img src="photoProd?idProd=${p.idProduct}"
                                    class="img-responsive" />
                            </div>
                            <div class="col-sm-12">
                                <input type="hidden" id="NAMEDIV-${p.idProduct}"
                                    value="${p.productName}"> <br /> <br />
                                Available Stocks:
                                <div id="QTYDIV-${p.idProduct}">${p.quantity}</div>
                                <input type="hidden" value="${p.quantity}"> <br>
                                <h2>${p.productName}</h2>
                                <p>${p.description}</p><br />
                                Product Category:
                                <h4>${c.nomCategory}</h4>
                                <p>NGN ${p.price}</p>
                            </div>
                        </div>
                    </div>
                </c:forEach>
            </c:if>
        </c:forEach>

我尝试按类别显示这些项目，但它不起作用，也许我做错了。但是我搜索并决定将显示范围更改为单页AngularJS应用程序。

现在，我有这个Angular脚本循环遍历产品名称（使用jsp foreach方法 - 我认为这不是正确的方法）并显示我在数据库中只有10个产品的列表中只有一个

<body ng-app="webStore">
<div ng-controller="MyCtrl">
    <p>{{value}}</p>
</div>

脚本：

var MyCtrl = function($scope) {
<c:forEach items="${products}" var="p">  
  $scope.value = "${p.productName}";
  </c:forEach> 
}

我也有这个Angular控制器功能，它应该在页面上显示这些产品，但它不起作用。

angular.module('webStore', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.
    // Bind your route with your template and associated controller
    // Your template will be loaded into ng-view area
    when('/web/LaboratoryEquipments', { templateUrl: '/web/LaboratoryEquipments', controller: MyController }).

    // Default route
    otherwise({redirectTo: '/'});
}]);

function MyController($scope, $routeParams, $http) {

// Here I use $http API from AngularJS but ng-resource may be easier to use 
// when you have to deal with rest resources
$http.get('web/LaboratoryEquipments').success(function(data) {
$scope.product = data.product;
$scope.category = data.category;
});
}

这是Spring MVC的控制器类，它检索数据并将其发送到JSP

@RequestMapping(value = "/LaboratoryEquipments")
public String labEquip(Model model) {
    int listSize = 0;
    // -------------------GET DATA FROM DB------------------//
    model.addAttribute("product", new Product());
    model.addAttribute("products", work.listproducts());
    model.addAttribute("categories", work.listCategories());

    List<Product> prod = work.listproducts();
    for (Product pr : prod) {
        System.out.println(pr.getPhoto());
        listSize++;
        model.addAttribute("listSize", listSize);
        model.addAttribute("cartItems", cartItems);
        // -------------------generating possible order on
        // cart-----------------------------------
        this.cartService.addCartService(pr.getIdProduct(),
                pr.getProductName(), 0, pr.getPrice());
    }
    return "labEquip";
}

我只想要AngularJS。我是棱角分明的新人，但我读了很多很多关于它的非常酷的功能。所以我渴望了解更多并了解它。

使用Spring MVC和AngularJS

0 个答案: