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

Utopik · Accepted Answer · 2013-10-20 09:23:56Z

8

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.

edited Oct 20, 2013 at 9:23

answered Oct 19, 2013 at 14:35

Utopik

3,7831 gold badge23 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Over a year ago

Thanks so much, I owe a treat to you? But I have 2 things to ask. why did you use Math.abs, I got it to work without that, Also how do I display books as well though I am able to alert the book and push that into array. jsbin.com/UBIwOsE/10

Utopik Over a year ago

I have updated my response. Btw, Math.abs() is not required, it's just an habit I have. (it makes sure that the price isnt negative)

Mike Over a year ago

Thanks a Ton. Just a minor niggle, why wont my bin append a br tag to the book jsbin.com/UBIwOsE/13 also why does this work $scope.books = $scope.books.concat(product) but this does not $scope.books.concat(product);

Utopik Over a year ago

because angular.js protect HTML. Use ng-repeat instead (docs.angularjs.org/api/ng.directive:ngRepeat)

GusDeCooL Over a year ago

@Utopik can you please explain what you mean by your addToCart() was not finished. I can't find diff in the addToCart() code

mrsus · Accepted Answer · 2014-03-18 12:30:44Z

1

It should be row.price in ng-click.

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

edited Mar 18, 2014 at 12:30

mrsus

5,4864 gold badges33 silver badges44 bronze badges

answered Oct 19, 2013 at 14:36

shrw

1,7956 gold badges31 silver badges54 bronze badges

Collectives™ on Stack Overflow

Angularjs Two Way data binding does not work?

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related