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

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()还没有完成

我已经更新了你的 bin 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（来自评论）

我已经更新了 bin 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>