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

我更新了你的垃圾箱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

我做了很多工作.轮到你了解:了解发生了什么.如果您不理解这些代码,请不要改进.