使用带有选择的ng-model来显示数据属性而不是值？答案

【问题标题】：Using ng-model with select to show data attribute instead of value?使用带有选择的ng-model来显示数据属性而不是值？
【发布时间】：2015-06-03 01:51:17
【问题描述】：

我目前有一个包含数据属性和值的简单选择列表：

<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），它当前正在显示所选选项的 value。

如何更改它以改为显示 data-name 属性？

【问题讨论】：

是这样的静态选择/选项吗？
@PSL - 它比我上面提到的要复杂得多。尽管一旦加载时创建了选择列表，就不会再向其中添加任何元素。
您如何构建选项？不是通过 ng-optons？
@PSL - 不，通过 ng-repeat。
那你为什么不相应地设置值呢？基本上 ng-model 将具有 select 的 .value 属性，该属性来自选定的选项值。这样可以管理吗？你能显示你的代码吗...

标签： javascript html angularjs angular-ngmodel

【解决方案1】：

我不确定问题中未提及的完整数据结构和其他可能性。但是对于这个静态列表，这里有一个简单的解决方案。

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">

注意：如果您使用不同的方式（您没有向我们展示）基于在数据属性中填充值的数据结构构建选择选项（如 @ 987654324@)，您可以使用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>

【讨论】：

有没有办法在不使用 ngRepeat 或 javascript 的情况下解决这个问题，只需在 DOM 中处理？这是我的问题：stackoverflow.com/questions/40699857/…