Question

我在ng-click上调用一个函数，该函数应该使用JSON数据中的值更新html。

我不知道这应该如何工作或我在这里做错了什么？

我的代码如下所示：

 <table  class="table table-striped table-bordered">
            <thead class="head">
                <th>Product</th>
                <th>Description</th>
                <th>Price(Rs.)</th>
                <th>Add to Cart</th>
            </thead>
            <tr ng-repeat="row in rows | filter:search | orderBy:'product'"  >
                <td>{{row.product}}</td>
                <td>{{row.description}}</td>
                <td>{{row.price}}</td>
              <td><a ng-click="addToCart(price)">Add to cart</a></td>
            </tr>

        </table>

以下是我的邮箱http://jsbin.com/UBIwOsE/2/

有人可以帮我告诉我如何用红色边框更新div。我需要在点击添加到购物车时更新它的书名和价格。

由于

Answer 1

你的垃圾箱里有一些错误。

1）有ng-click="{{addToChat(price)}}"。当然，应删除{{ }}。

2）您的addToCart()未完成

我更新了您的收件箱http://jsbin.com/UBIwOsE/5/

// In your controller

// init variables
$scope.price = $scope.selected = 0;

// fired with ng-click()
$scope.addToCart = function(price) { 
   $scope.price += Math.abs(price);
   $scope.selected++;
}

// In your template

// 1) the ng-click directive looks like this
 <td><a ng-click="addToCart(row.price)">Add to cart</a></td>

// 2) show infos
<div class="cart">
   You have {{selected}} books and Total cost is {{price}}
</div>

它有效，但并不完美。看看，从中学习，并阅读更多关于angularjs的教程（我建议你观看http://egghead.io视频，免费且精心制作）

问题2 （来自评论）

我更新了邮箱http://jsbin.com/UBIwOsE/11/

<!-- template -->

<!--  the parameter sent is the object itself (row instead of row.price) -->
<a ng-click="addToCart(row)">Add to cart</a>

<!-- ... ->

    You have {{books.length}} books and Total cost is {{price}}<br />
<!-- ng-show shows or hides the element based on the expression. -->
<div ng-show="books.length > 0">
  These books are 
    <ul>
      <!-- ng-repeat duplicates the template for each element in the collection. -->
      <li ng-repeat="book in books">{{book.product}} ( {{book.price}} )</li>
  </ul>
</div>

-

// controller

// we push the object into the array, so that we can access to all the data into the template ( {{book.product}} - {{book.price}} )
// $scope.selected is useless now. The array's length is enough
// we keep $scope.price because it's easier than recalculating it from the array. 
$scope.addToCart = function(row) {
    $scope.price += row.price;
    $scope.books.push(row);
}

现在，您必须跟踪$scope.books中的重复元素有很多方法可以做到这一点。我最喜欢的是http://jsbin.com/UBIwOsE/12

我做了很多工作。轮到你了解：了解发生了什么。如果您对此代码不太了解，请不要改进此代码。

Answer 2

row.price中应为ng-click。

<td><a ng-click="addToCart(row.price)">Add to cart</a></td>

Angularjs双向数据绑定不起作用？

2 个答案: