1

When I'm adding new product to a product list its not working. So the products get loaded well but the ng-click function does not getting called. (The alert I put in the addProduct function is not executed).

HTML

<div ng-controller="ProductController as ProductCtrl">
Zoeken <input type="text" ng-model="search" placeholder="Search" />
<div>
    Filter Type
    <button ng-repeat="cat in categories" ng-click="filterProductsByCategory(cat)">{{cat}}</button>
</div>
<table cellpadding="5" cellspacing="0" border="1">
    <tr>
        <th>ID</th>
        <th>Product</th>
        <th>Type</th>
        <th>Price</th>
        <th>Toevoegen</th>
    </tr>
    <tr ng-repeat="product in ProductCtrl.products">
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>{{product.type}}</td>
        <td>{{product.price}}</td>
        <td></td>
    </tr>
    <tr><td></td>
        <td><input type="text" name="newProduct.name" ng-model="productCtrl.newProduct.name"></td>
        <td><input type="text" name="newProduct.price" ng-model="productCtrl.newProduct.price"></td>
        <td><input type="text" name="newProduct.type" ng-model="productCtrl.newProduct.type"></td>
        <td><a href ng-click="productCtrl.addProduct()">Product {{productCtrl.newProduct.name}} toevoegen</a></td></tr>
</table>

Any help would appreciated.

The controller:

app.controller('ProductController', function(productService) {

    var that = this;

    productService.getProducts().success(function(data) {
        that.products = data;
    });

    this.newProduct = "";
    this.addProduct = function() {

        that.products.push(this.newProduct);
        window.alert(that.products);
        this.newProduct = "";

    };
});
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
Sander Nelen
  • 25
  • 1
  • 5

1 Answers1

4

Its a typo, your controller alias name is ProductCtrl not productCtrl, Additionally you need to change your ng-model's to correct the same thing

Replace productCtrl to ProductCtrl will fix your issue.

<tr>
  <td>
     <input type="text" name="newProduct.name" ng-model="ProductCtrl.newProduct.name"/>
  </td>
  <td>
    <input type="text" name="newProduct.price" ng-model="ProductCtrl.newProduct.price"/>
  </td>
  <td>
     <input type="text" name="newProduct.type" ng-model="ProductCtrl.newProduct.type"/>
  </td>
  <td>
    <a href ng-click="ProductCtrl.addProduct()">
       Product {{productCtrl.newProduct.name}} toevoegen
    </a>
  </td>
</tr>
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299