Question

所以我有一个显示一些选项的select标签，我希望当选择一个选项时，它会获取data-something属性并将其值（属性）粘贴到我的输入元素中。它只是示范，值属性应该以表格形式发送。

<input ng-model="refreshedByExample" type="text">
<select ng-model="example">
    <option value="1" data-something="valueForRefreshedByExample1">1</option>
    <option value="2" data-something="valueForRefreshedByExample2">2</option>
    <option value="3" data-something="valueForRefreshedByExample3">3</option>
</select>

有什么想法吗？

非常感谢大家

Answer 1

使用正确的代码更新答案

<input ng-model="refreshedByExample" type="text">
<select ng-model="example" ng-change="refreshByExample=example"> 
    <option ng-value="valueForRefreshedByExample1">1</option> 
    <option ng-value="valueForRefreshedByExample2">2</option> 
    <option ng-value="valueForRefreshedByExample3">3</option> 
</select>

请参阅ng-value。

如果您的值包含在数组中，也请考虑使用ng-options。

Answer 2

我更喜欢在这些情况下使用ng-options。

<select ng-model="example" 
  ng-options="item.value as item.id for item in array">
</select>

和数组一样

$scope.array = [
  {id: 1, value: 'valueForRefreshedByExample1'},
  {id: 2, value: 'valueForRefreshedByExample2'},
  {id: 3, value: 'valueForRefreshedByExample3'}
];

编辑：

带有值的示例（如果valueForRefreshedByExample1不是字符串，请使用ngValue）：

<input ng-model="example2" type="text">
<select ng-model="example2">
  <option value="valueForRefreshedByExample1">1</option>
  <option value="valueForRefreshedByExample2">2</option>
  <option value="valueForRefreshedByExample3">3</option>
</select>

这里可以看到例子https://plnkr.co/edit/gfYak9zkKsAu0I5eQHx0?p=preview

Answer 3

请看下面的代码，我想也许你正在寻找。自定义属性类型指令。

function exampleController($scope) {

}

function extractValue() {
  return {
    restrict: 'A',
    scope: false,
    link: function($scope, $element, $attr) {
      if ($attr.something) {
        $element[0].value = $attr.something;
      }
    }
  };
}

angular
  .module('app', [])
  .controller('exampleController', exampleController)
  .directive('extractValue', extractValue);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="app">
  <div class="row" ng-controller="exampleController">
    <input ng-model="example" type="text">
    <select ng-model="example">
      <option value="1" data-something="valueForRefreshedByExample1" extract-value>1</option>
      <option value="2" data-something="valueForRefreshedByExample2" extract-value>2</option>
      <option value="3" data-something="valueForRefreshedByExample3" extract-value>3</option>
    </select>
  </div>
</div>

AngularJS - 选择标记 - 从选项中获取属性

3 个答案: