Angularjs Two Way data binding does not work?

Question

I am calling a function on ng-click that should update the html with a value from a JSON data.

I have no idea how this is supposed to work or what I am doing wrong here?

My code looks like this:

 <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>

Below is my bin http://jsbin.com/UBIwOsE/2/

Can some one help me telling that how do I update the div with red border. I need to update it with the name of the book and its price on clicking Add to cart.

Thanks

Answer 1

You have a few errors in your bin.

1) there was ng-click="{{addToChat(price)}}" . Of course, {{ }} should be deleted.

2) your addToCart() was not finished

I have updated your 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>

It works, but it's not perfect. Have a look, learn from it, and read more tutorials about angularjs (I advise you to watch http://egghead.io videos, free and well made)

---

question 2 (from comments)

I have updated the 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);
}

---

Now, you have to track duplicates elements in $scope.books There are lots of way to do that. My favorite looks like http://jsbin.com/UBIwOsE/12

I have done lots of work. Your turn to work : understand what's going on. Do not improve this code if you don't understand it well.

Answer 2

在ng-click应为row.price 。

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