AngularJS - select tag - получение атрибута из опции, если выбрано

Question

Итак, у меня есть тег select, который показывает некоторые параметры, и я хочу, чтобы при выборе опции он принимал атрибут 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'} 
]; 

EDIT:

пример с Value (если 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> 

В exemples можно посмотреть здесь 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>