在使用AngularJS中的select下拉元素时,我在这里慢慢变得头疼。我可以选择框,但是当选择了一个选项时,它不会更新模型。
我的服务文件如下所示(现在使用模型数据):
orderService.js:
app.service('orderService', function ($http) {
this.getProductCategoriesWithProducts = function (userId) {
return productsMockData();
}
});
/* Mockup data functions */
function productsMockData() {
var category1 = {
name: "test21",
products: [
{
productId: "1",
unitPrice: 200,
description: "test21",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "109051",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
}
]
};
var category2 = {
name: "test4",
products: [
{
productId: "2",
unitPrice: 100,
description: "test4",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "109154",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
},
{
productId: "3",
unitPrice: 100,
description: "test",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
},
{
value: "BOX",
name: "BOX"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "109152",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
},
{
productId: "4",
unitPrice: 40,
description: "asda",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "109151",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
}
]
};
var category3 = {
name: "test45",
products: [
{
productId: "5",
unitPrice: 400,
description: "sdfsfss",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "109331",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
}
]
};
var category4 = {
name: "test65",
products: [
{
productId: "6",
unitPrice: 90,
description: "asda",
size: "M/L",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "700107",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
}
]
};
var category5 = {
name: "gdfd",
products: [
{
productId: "7",
unitPrice: 90,
description: "asda",
size: "Past.prod",
units: [
{
value: "KS",
name: "KS"
}
],
selectedUnit: { value: "", name: "" },
itemNumber: "900192",
numOfSelectedItems: 0,
userComment: "",
linePrice: 0
}
]
};
var array = [];
array.push(category1);
array.push(category2);
array.push(category3);
array.push(category4);
array.push(category5);
return array;
}
我的 orderController.js 如下所示:
app.controller('orderController', function ($scope, $timeout, orderService, $filter) {
// Constructor for this controller
init();
function init() {
$scope.selected = {};
$scope.products = orderService.getProductCategoriesWithProducts(1234);
console.log($scope.products);
$scope.orderLines = [];
$scope.totalSum = 0.00;
$scope.shippingDate = "";
$scope.shippingAddress = "";
$scope.user = {};
$scope.orderComment = "test";
}
$scope.calculateLinePrice = function (product) {
product.linePrice = product.numOfSelectedItems * product.unitPrice;
}
$scope.calculateTotalPrice = function () {
}
});
我的视图看起来像这样:
<table>
<tr ng-repeat="product in productCategory.products">
<td>{{ product.description }}</td>
<td>{{ product.size }}</td>
<td>
<select ng-model="product.units.selectedUnit"
ng-options="u.value as u.name for u in product.units"
ng-init="u = product.units[1].name">
</select>
</td>
</tr>
</table>
当我查看Google Chrome中的元素检查器时,输出的选项如下所示:
<option value="?" selected="selected"></option>
<option value="0">KS</option>
主要问题(我认为)是这样的,我不完全理解选择角度代码中发生了什么:
<select ng-model="product.units.selectedUnit"
ng-options="u.value as u.name for u in product.units"
ng-init="u = product.units[1].name">
</select>
阅读有关select和ng-options的AngularJS文档以及搜索时的几个示例,我不明白: - (
我希望有人能指出我正确的方向。
提前多多感谢!
使用解决方案更新
这是相当基本的,我想需要5分钟离开它;-)它对于模型绑定它是一个错字:
<select ng-model="product.units.selectedUnit" ..
应阅读:
<select ng-model="product.selectedUnit" ..
和(感谢Zack)ng-init =“”应为:
ng-init="product.selectedUnit = product.units[0]"