2

我有一个产品列表,动态添加到 HTML 中。当用户点击一个产品时,它必须被添加到购物车中(想想,jQueryUI 购物车示例)。

HTML:从这个动态列表中,我如何检索点击的产品并将其插入 JSON 对象?

<li ng-model="selectProduct" ng-click="addProduct()" ng-repeat="product in Products">
  {{product}}
</li>

脚本

$scope.addProduct = function () {
    $scope.myProducts.push($scope.selectProduct); // add text of the selected product
};

$scope.myObject = {
   myProducts: []
};

在 jQuery 中,它类似于

$("p").click(functions (){
  var aa = $(this).text()
  myObject = {
    'selectProduct': aa
  };
});
4

3 回答 3

3

您可以将它作为参数传递,所以它会像这样工作

HTML:

<li ng-click="addProduct(product)" ng-repeat="product in Products">
  {{product}}
</li>

控制器:

$scope.Products = ["One","Two","Three","Four"]
$scope.myObject = {
   myProducts: []
};

$scope.addProduct = function (thisProduct) {
    $scope.myObject.myProducts.push(thisProduct);
};

一个工作示例位于http://jsfiddle.net/trMKQ/(单击产品名称以查看)。

于 2013-08-12T14:43:01.883 回答
1

作为@mikel 答案的替代方案,您实际上可以直接访问模型。

所以你的html代码是;

<li ng-click="addProduct()" ng-repeat="product in Products">
  {{product}}
</li>

你的角度点击方法是;

$scope.addProduct = function(){
    var selectedProduct = this.product; // where product = product in Products.
};

如果您将重复指令更改为,item in Products那么匹配的 js 将是this.item;

于 2013-08-12T15:01:42.057 回答
0

您必须使用“数据”属性来指示点击的产品:

$('.product').click(function() {
    $(this).data('clicked', '1');
});
于 2013-08-12T14:45:31.493 回答