Question

我希望有人可以提供帮助。

我是AngularJS的新手，正在使用该框架进行我的第一个项目。我正在尝试创建一个简单的结账系统。

我有一个包含2列的html页面;左边是项目列表，右边是包含项目的篮子（购物车）。

这是项目清单;

<div class='panel-body'>
<div ng-repeat='m in merchandiseCtrl.merchandise'>
    <div class='row'>
        <!--START OF NESTED COLUMN-->

        <div class='col-xs-2'>
            <!--START OF LEFT NEST COLUMN-->
            <img ng-src='../images/{{ m.id }}.jpg' class='img-responsive'>
        </div>

        <div class='col-sm-4'>
            <strong>{{m.name}}</strong>
            <br>
            {{m.desc}}
        </div>
        <!--END OF LEFT NEST COLUMN-->

        <div class='col-xs-6'>
            <!--START OF RIGHT NEST COLUMN-->
            <div class='col-xs-6'>
                <!--MORE NESTED COLUMNS ... -->
                {{m.price}}
            </div>

            <div class='col-xs-2'>
                <input type='text' class='form-control input-sm' value='1'>
            </div>

            <div class='col-xs-4'>
                <button ng-click='merchandiseCtrl.addItemToBasket(m)' type='button' class='btn btn-primary' ng-click=''>Add Item</button>
            </div>
            <!--START OF LEFT NEST COLUMN-->
        </div>

    </div>
    <!--END OF NESTED COLUMN-->
    <hr>
</div>
<!--END OF ANGULAR REPEAT-->

这是当前使用的控制器。

//Controller:
app.controller('MerchandiseController', function(merchandiseService) {

    var that = this;

    merchandiseService.getMerchandise().success(function (data){
        that.merchandise = data;
    });

    var basket = [];
    this.addItemToBasket = function(item){

        console.log(item.name);
        basket.push(item);
        console.log(basket.length)
    },

    this.removeItem = function(item){
        console.log("remove me" + item.name);
    },

    this.total = function(){


        return total;
    }


});

现在，我打算用我已经添加到控制器中声明的数组'basket'的项目填充篮子（购物车）。我不确定如何在html中访问'basket'数组来重复内容。

这是我到目前为止的篮子（购物车）（我想打印出篮子阵列中的物品）......

<div ng:repeat='m in merchandiseCtrl BASKET???' class='row'>
<div class='col-sm-3'>{{ m.name }}</div>
<div class='col-sm-3'>Quantity</div>
<div class='col-sm-3'>{{ m.price }}</div>
<div class='col-sm-3 '>
    <button ng-click='merchandiseCtrl.removeItem(m)' type='button' class='btn btn-link btn-xs'>
        <span class='glyphicon glyphicon-trash'></span>
    </button>
</div>
<hr>

Answer 1

与重复列表中的项目的方式相同。您不能使用var存储购物篮集合，而是将其附加到范围：

that.basket = [];
that.addItemToBasket = function(item){
    that.basket.push(item);
},

你只需在html中重复一遍：

<div ng:repeat='m in merchandiseCtrl.basket' class='row'>
<div class='col-sm-3'>{{ m.name }}</div>
<div class='col-sm-3'>Quantity</div>
<div class='col-sm-3'>{{ m.price }}</div>
<div class='col-sm-3 '>
<button ng-click='merchandiseCtrl.removeItem(m)' type='button' class='btn btn-link btn-xs'>
    <span class='glyphicon glyphicon-trash'></span>
</button>

另外，为了清楚起见，请将所有范围属性和方法附加到that，不要混合this和that。我也会重命名＆＃34;那＆＃34;类似于＆＃34; vm＆＃34;或＆＃34; merchandiseVm＆＃34;

Angulajs：阵列中的ng-repeat

1 个答案: