当我将新产品添加到产品列表时,它不起作用。因此,产品加载得很好,但没有调用ng-click
函数。 (我在addProduct
函数中放置的警报未执行)。
的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>
任何帮助,将不胜感激。
控制器:
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 = "";
};
});
最佳答案
这是一个错字,您的控制器别名是ProductCtrl
而不是productCtrl
,此外,您还需要更改您的ng-model
以更正同一件事
将productCtrl
替换为ProductCtrl
将解决您的问题。
<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>