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 - 选择标签 - 从选项中获取属性

回答

相关问题