AngularJS - 選擇標籤 - 從選項中獲取屬性

因此，我有一個選擇標籤，顯示一些選項，我希望當選擇一個選項時，它將採用data-something屬性並在輸入中粘貼其值（屬性）元素我有。只是說明性的，價值屬性應該以形式發送。AngularJS - 選擇標籤 - 從選項中獲取屬性

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

任何想法？

非常感謝大家

來源

2016-11-20 mkmnstr

你有什麼樣的數據結構呢？ – alphapilgrim

嗨@alphapilfgrim，其基本上是。我沒有使用ngRepeat，這些值在DOM中像那樣加載。當選擇該選項時，它基本上應該給'refreshedByExample'提供屬性'data-something'內部什麼值。 – mkmnstr

我覺得如果我理解正確，你只是錯過了使用相同的模型。 http://codepen.io/alphalink/pen/dONqRv?editors=1010除非你完全不能獲得屬性的值，否則你應該使用屬性類型指令。 – alphapilgrim

更新答案與正確的代碼

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

來源

2016-11-20 01:58:19 mcrvaz

Ahm ...你可以在代碼中演示如何從選擇標籤中選擇一個選項時使用ng-value來更改其他元素的值嗎？請。不，我的值不包含在數組中。 – mkmnstr

' – mcrvaz

對不起，搞砸了格式化那裏，我也可能會誤解你的問題，但是這應該這樣做。會發生什麼情況是，您使用所選選項設置'example'變量的值。當選定的值發生變化時，可以使用與'example'相同的值來設置'refreshByExample'。 – mcrvaz

我更喜歡在這些情況下使用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陣列：

與值的示例（如果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

來源

2016-11-20 02:28:47

我很欣賞你的答案，但我不能這樣做。我無法編輯代碼的生成方式。 – mkmnstr

你是什麼意思，你不能編輯代碼？ –

我的意思是，代碼是給我的，因爲它是我不能修改它現在正在用ng-options生成，因此不能用戶你提出的數組。 – mkmnstr

請參閱下面的代碼，我想這可能是你要找的。自定義屬性類型指令。

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>

來源

2016-11-20 02:41:29 alphapilgrim

AngularJS - 選擇標籤 - 從選項中獲取屬性

回答

相關問題