从使用 Angular 生成的服务器端获取选择属性值
Getting selection attribute values from a server side generated drop down with Angular
我有一个从服务器端生成的 select 下拉列表,所以我无法将其更改为使用 javascript 或数组或 ng-select。我想将 selection 的属性转换为 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"}
我能想到的最佳解决方案是向每个选项添加一个指令,以获取属性并将它们推送到对象数组。然后我可以在 select 下拉列表中使用 ng-change。然后根据selection的值得到数组上的selected对象。
有更好的方法吗?
这里的指令是这样的:
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;
}
}
}
});
有没有更好的方法来完成这个?
理想情况下,我不需要包含所有对象的数组,我只需要 selected 对象。
jsfiddle:
http://jsfiddle.net/ocLrt7vp/7/
这对我有用。我创建了一个获取更改值的指令。然后将属性转换为对象。
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/
我有一个从服务器端生成的 select 下拉列表,所以我无法将其更改为使用 javascript 或数组或 ng-select。我想将 selection 的属性转换为 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"}
我能想到的最佳解决方案是向每个选项添加一个指令,以获取属性并将它们推送到对象数组。然后我可以在 select 下拉列表中使用 ng-change。然后根据selection的值得到数组上的selected对象。
有更好的方法吗?
这里的指令是这样的:
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;
}
}
}
});
有没有更好的方法来完成这个? 理想情况下,我不需要包含所有对象的数组,我只需要 selected 对象。
jsfiddle: http://jsfiddle.net/ocLrt7vp/7/
这对我有用。我创建了一个获取更改值的指令。然后将属性转换为对象。
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/