AngularJS

Question

所以我有一个显示一些选项的 select 标签，我希望当一个选项被 selected 时，它采用 data-something 属性并粘贴它的值（属性的) 在我的输入元素中。仅作说明，value 属性应以表单形式发送。

<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 - select 标签 - 在 selected 时从选项获取属性

AngularJS - select tag - getting attribute from option when selected

javascript

angularjs-ng-change