從服務器端獲取選擇屬性值，並使用Angular下拉列表

Question

我從服務器端生成了一個select下拉列表，因此無法將其更改為使用javascript或數組或ng-select。 我想將選擇的屬性轉換為javascript對象。

<select ng-model="selectedVal" ng-change="selectVal()">
    <option value="val1" attr1="attr11val" attr2="attr12val" cp-option="allObjs">opt1</option>
    <option value="val2" attr1="attr21val" attr2="attr22val" cp-option="allObjs" selected>opt2</option>
    <option value="val3" attr1="attr31val" attr2="attr32val" cp-option="allObjs">opt3</option>
</select>

我希望“ selectedVal”看起來像這樣：

{"value":"val2","attr1":"attr21val","attr2":"attr22val"}

我能想到的最好的解決方案是在每個選項中添加一條指令，以獲取屬性並將其推入對象數組。 然后，我可以在選擇下拉菜單上使用ng-change。 然后根據選擇的值在數組上獲取選擇的對象。

有一個更好的方法嗎？

這里的指令看起來像：

app.directive('cpOption', function () {
function link(scope, elem, attr) {
    var obj = {};
    for (var property in attr.$attr) {
        if (attr.hasOwnProperty(property)) 
            obj[property] = attr[property];
    }
    scope.cpOption.push(obj);
}

return {
    restrict: 'A',
    link: link,
    scope: {
        cpOption: '=cpOption'
    }
}
});

和控制器

app.controller('myCtrl', function ($scope) {
$scope.allObjs = [];
$scope.selectedVal = {};
$scope.selecteObj = {};

$scope.selectVal = function () {
    for (var val in $scope.allObjs) {
        if ($scope.allObjs[val].value === $scope.selectedVal) {
            $scope.selecteObj = $scope.allObjs[val];
            break;
        }
    }
}
});

有更好的方法可以做到這一點嗎？ 理想情況下，我不需要包含所有對象的數組，而只需要選擇的對象。

jsfiddle： http : //jsfiddle.net/ocLrt7vp/7/

Answer 1

這對我有用。 我創建了一個獲取更改值的指令。 然后將屬性轉換為對象。

app.directive('cpSelectAttrs', function () {

function link(scope, elem) {
    elem.bind('change', function () {
       getSelectionAttrs(scope, elem);
       scope.$apply();
    });

    getSelectionAttrs(scope, elem);
}

function getSelectionAttrs(scope, elem){
        var obj = {};
        var attrs = (elem[0].selectedOptions[0].attributes);
        var length = attrs.length;
        obj.text = elem[0].selectedOptions[0].text;
        for (var i = 0; i < length; i++) {
            obj[attrs[i].localName] = attrs[i].value;
        }
        scope.cpSelectAttrs = obj;
}

return {
    restrict: 'A',
    link: link,
    scope: {
        cpSelectAttrs: '=cpSelectAttrs'
    }
}
});

jsFiddle： http : //jsfiddle.net/yzLx6x7d/3/