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

Question

我目前有一个简单的 select 列表，其中包含数据属性和值：

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

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

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

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

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

Using ng-model with select to show data attribute instead of value?

html

javascript

angularjs

angular-ngmodel