我目前有一个简单的选择列表，其中包含数据属性和值:
<select ng-model="myList">
<option value="1" data-name="Test name 1">Option 1</option>
<option value="2" data-name="Test name 2">Option 2</option>
<option value="3" data-name="Test name 3">Option 3</option>
</select>
<div id="displaySelected">
{{myList}}
</div>
在我的 div 中(ID 为 displaySelected)，当前正在显示所选选项的值。
如何更改此设置以显示 data-name 属性？
最佳答案
我不确定问题中未提及的完整数据结构和其他可能性。但这里有一个针对此静态列表的简单解决方案。
app.directive('dataselector', function(){
return{
restrict:'A',
require:['ngModel','select'], //Require ng-model and select in order to restrict this to be used with anything else
link:function(scope, elm, attrs, ctrl){
//get configured data to be selected, made this configurable in order to be able to use it with any other data attribs
var dataProp = attrs.dataselector,
ngModel = ctrl[0];
elm.on('change', handleChange);//Register change listener
scope.$on('$destroy', function(){
elm.off('change', handleChange);
});
function handleChange(){
//get the value
var value = this.value;
//get the dataset value
var dataVal = elm[0].querySelector('option[value="' + this.value + '"]').dataset[dataProp];
//reset ngmodel view value
ngModel.$setViewValue(dataVal);
ngModel.$render();
//set element value so that it selects appropriate item
elm.val(value);
}
}
}
});
并将其用作:
<select ng-model="myList" dataselector="name">
注意:如果您使用不同的方式(您没有向我们展示)来基于在数据属性中填充值的数据结构(例如 ng-repeat)，您可以使用 ng-change="selectedItem(itemFromRepeat)" 注册更改事件，并且可以使用处理程序中的数据值设置另一个属性并使用它.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
}).directive('dataselector', function() {
return {
restrict: 'A',
require: ['ngModel', 'select'],
link: function(scope, elm, attrs, ctrl) {
var dataProp = attrs.dataselector;
elm.on('change', handleChange);
scope.$on('$destroy', function() {
elm.off('change', handleChange);
});
function handleChange() {
var value = this.value;
var dataVal = elm[0].querySelector('option[value="' + this.value + '"]').dataset[dataProp];
ctrl[0].$setViewValue(dataVal);
ctrl[0].$render();
elm.val(value);
}
}
}
});<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model="myList" dataselector="name">
<option value="1" data-name="Test name 1">Option 1</option>
<option value="2" data-name="Test name 2">Option 2</option>
<option value="3" data-name="Test name 3">Option 3</option>
</select>
<data-select></data-select>
<div id="displaySelected">
{{myList}}
</div>
</body>
</html>关于javascript - 使用 ng-model 和 select 来显示数据属性而不是值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30609527/