未动态添加的项目列表
List of items not getting added dynamically
我在 AngularJS 中编写了这段代码,我想在其中添加商品名称、价格和数量。此项目以低 table 表示并保存为数组。稍后,我正在查找总帐单。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "text" ng-model="price"></td>
<td><input type = "text" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button onClick="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.createItem = function($scope) {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
</script>
</body>
</html>
请指导我我做错了什么,它不起作用,以及如何收集这个数组作为一个对象保存在数据库中。我不确定如何使用 angular 实现此目的,每当有新指令模板添加到动态视图时如何将对象添加到数组。
提前致谢。
您的代码存在多个问题。
1.Syntax错误:未关闭控制器。
2.Your 控制器是 myCtrl
但你在 angularjs 代码中使用了 OnlineShopping
3.$scope.items 不是 defined.use 这个在控制器里 $scope.items = []
4.you 应该调用 addItem 作为 $scope.addItem
5.Onclick
不适用于 angular 你应该使用 ng-click
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<br>
<h3>Total : <span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];$scope.total = 0;
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = ($scope.price * $scope.quantity).toFixed(2);;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
$scope.totalBill($scope.items);
};
$scope.totalBill = function (items) {
var total = 0;
for(var i = 0; i < $scope.items.length; i++){
var item = $scope.items[i];
total += (item.quantity*item.price);
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
});
</script>
你的代码语法错误太多:我已经为你的代码准备了代码笔
[在此处查看][1]
你错过了闭幕式你错过了一些独家新闻。请查看码笔码这对你有帮助
[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV?
所以你的代码他
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "number" ng-model="price"></td>
<td><input type = "number" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.items = [];
$scope.createItem = function() {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
})
</script>
试试这个代码,有很多错误
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item)
};
$scope.totalBill = function (items) {
$scope.total = 0;
for (var item in items) {
total += item.cost;
}
$scope.total = total;
};
});
</script>
</body>
</html>
我在 AngularJS 中编写了这段代码,我想在其中添加商品名称、价格和数量。此项目以低 table 表示并保存为数组。稍后,我正在查找总帐单。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "text" ng-model="price"></td>
<td><input type = "text" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button onClick="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.createItem = function($scope) {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
</script>
</body>
</html>
请指导我我做错了什么,它不起作用,以及如何收集这个数组作为一个对象保存在数据库中。我不确定如何使用 angular 实现此目的,每当有新指令模板添加到动态视图时如何将对象添加到数组。
提前致谢。
您的代码存在多个问题。
1.Syntax错误:未关闭控制器。
2.Your 控制器是 myCtrl
但你在 angularjs 代码中使用了 OnlineShopping
3.$scope.items 不是 defined.use 这个在控制器里 $scope.items = []
4.you 应该调用 addItem 作为 $scope.addItem
5.Onclick
不适用于 angular 你应该使用 ng-click
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<br>
<h3>Total : <span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];$scope.total = 0;
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = ($scope.price * $scope.quantity).toFixed(2);;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
$scope.totalBill($scope.items);
};
$scope.totalBill = function (items) {
var total = 0;
for(var i = 0; i < $scope.items.length; i++){
var item = $scope.items[i];
total += (item.quantity*item.price);
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
});
</script>
你的代码语法错误太多:我已经为你的代码准备了代码笔 [在此处查看][1]
你错过了闭幕式你错过了一些独家新闻。请查看码笔码这对你有帮助
[1]: https://codepen.io/sumit-jaiswal/pen/LLdbRV?
所以你的代码他
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<form>
<td><input type = "text" ng-model="name"></td>
<td><input type = "number" ng-model="price"></td>
<td><input type = "number" ng-model="quantity"></td>
</form>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function($scope)
{
var i = 1;
$scope.items = [];
$scope.createItem = function() {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function(item) {
$scope.items.push(item);
$scope.item = {};
$scope.resetForm();
};
$scope.totalBill = function(items) {
$scope.total = 0;
for(var item in items) {
total+=item.cost;
}
$scope.total = total;
};
$scope.resetForm = function(){
$scope.name = '';
$scope.price = '';
$scope.quantity = '';
}
})
</script>
试试这个代码,有很多错误
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<p>Try to add the items.</p>
<div ng-app="myApp" ng-controller="OnlineShopping">
<table border="1">
<tr>
<td>Item</td>
<td>Price</td>
<td>Quantity
</tr>
<tr>
<td><input type="text" ng-model="name"></td>
<td><input type="text" ng-model="price"></td>
<td><input type="text" ng-model="quantity"></td>
</tr>
</table>
<br>
<button ng-click="createItem()">Add to Cart</button>
<h2>My Cart</h2>
<div style="border: 1px solid blue;">
</div>
<table border="1" class="mytable">
<tr>
<td>S.No.</td>
<td>Item</td>
<td>Price</td>
<td>Quantity</td>
<td>Cost</td>
</tr>
<tr ng-repeat="item in items">
<td><span ng-bind="item.serial"></span></td>
<td><span ng-bind="item.name"></span></td>
<td><span ng-bind="item.price"></span></td>
<td><span ng-bind="item.quantity"></span></td>
<td><span ng-bind="item.cost"></span></td>
</tr>
</table>
<br>
<h3><span ng-bind="total"></span></h3>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("OnlineShopping", function ($scope) {
var i = 1; $scope.items = [];
$scope.createItem = function () {
var item = {};
item.serial = i++;
item.name = $scope.name;
item.price = $scope.price;
item.quantity = $scope.quantity;
item.cost = $scope.price * $scope.quantity;
item.cost = $scope.quantity;
$scope.addItem(item);
};
$scope.addItem = function (item) {
$scope.items.push(item)
};
$scope.totalBill = function (items) {
$scope.total = 0;
for (var item in items) {
total += item.cost;
}
$scope.total = total;
};
});
</script>
</body>
</html>