使用ng-options获取所选项目

时间:2013-06-22 18:09:58

标签: angularjs

我有一个包含属性的数组,我正在尝试在加载时选择某个。

我的每个属性都有属性对象,类型对象和一个attributeValues数组。

我想用selected = true

选择属性值

这是我的Angular代码:

app.controller('MainCtrl', function($scope) {
  $scope.profileData = { "attributes": [{
        "attribute": {
            "id": 56,
                "name": "Hárlitur",
                "typeID": 5,
                "visibleToUsers": true
        },
            "type": {
            "id": 5,
                "typeName": "list"
        },
            "attributeValues": [{
            "id": 109,
                "attributeID": 56,
                "value": "Ljós",
                "chosen": true
        }, {
            "id": 110,
                "attributeID": 56,
                "value": "Dökkur",
                "chosen": false
        }],
            "valueText": null
    }]};

    $scope.changeValue = function changeValue(attribute, value) {
            alert(JSON.stringify({"attributeID":attribute.attribute.id, "type": attribute.type.typeName, "value":value.id}));
    };
});

这是我的HTML代码:

<div ng-repeat="attribute in profileData.attributes">
        <select ng-change="changeValue(attribute, attributeValue)" ng-options="item.id as item.value for item in attribute.attributeValues" ng-model="attributeValue.id"></select>
</div>

这是我的傻瓜: http://plnkr.co/edit/VMbmSB?p=preview

2 个答案:

答案 0 :(得分:1)

我不知道这是否是您问题的最佳解决方案,但它确实有效。

我只想创建一个函数来搜索所选的值设置为true。找到该值后,我将范围模型设置为该属性值。然后我立即调用了该函数。

$scope.selectChosen = function selectChosen() {
    var attrVals = $scope.profileData.attributes[0].attributeValues;
    for (var i = 0; i < attrVals.length; i++) {
        if (attrVals[i].chosen) {
            $scope.attributeValue = attrVals[i];
            break;
        }
    }
};
$scope.selectChosen();

完整的弹药位于:http://plnkr.co/edit/UcmQ8Q?p=preview

答案 1 :(得分:1)

我找到了一个更好的Angular-ish解决方案:

<div ng-repeat="attribute in profileData.attributes">
    <select ng-model="attributeValue" ng-change="changeValue(attribute, attributeValue)">
        <option value="">Select</option>
        <option ng-repeat="obj in attribute.attributeValues" value="{{obj.id}}" ng-selected="obj.chosen">{{obj.value}}</option>
    </select>
</div>