AngularJS选择不更新模型

时间:2014-01-07 22:13:17

标签: javascript jquery angularjs

在使用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]"

0 个答案:

没有答案