AngularJS - Tag auswählen - Attribut aus der Option holen

Also habe ich ein Select-Tag, das einige Optionen zeigt und ich wünsche, dass wenn eine Option ausgewählt wird, das data-something Attribut und fügt seinen Wert (des Attributs) in der Eingabe Element, das ich habe. Es ist nur demonstrativ, Wert-Attribut sollte in der Form gesendet werden.AngularJS - Tag auswählen - Attribut aus der Option holen

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

Irgendwelche Ideen?

Vielen Dank jeder

Quelle

2016-11-20 mkmnstr

welche Art von Datenstruktur haben Sie? – alphapilgrim

Hallo @alphapilfgrim, es ist im Grunde das. Ich verwende nicht ngRepeat, die Werte werden wie im DOM geladen. Es sollte im Grunde 'refreshedByExample' den Wert von whats innerhalb des Attributs 'data-something' geben, wenn die Option ausgewählt ist. – mkmnstr

Ich denke, du verpasst nur mit dem gleichen Modell, wenn ich richtig verstehe. http://codepen.io/alphagelink/pen/dONqRv?editors=1010 Wenn Sie den Wert des Attributs immer noch nicht erhalten können, sollten Sie eine Attributtyp-Direktive verwenden. – alphapilgrim

die Antwort mit der richtigen Code aktualisiert

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

Verwenden Sie auch ng-options, wenn Ihre Werte in einem Array enthalten sind.

Quelle

2016-11-20 01:58:19 mcrvaz

Ahm ... können Sie im Code demonstrieren, wie Sie den Wert eines anderen Elements mit ng-value ändern können, wenn eine Option von einem Select-Tag ausgewählt wird? Bitte. Und nein, meine Werte sind nicht in einem Array enthalten. – mkmnstr

' ' – mcrvaz

Sorry, vermasselte es Formatierung, auch könnte ich Ihre Frage falsch verstanden, aber das sollte es tun. Was passiert, ist, dass Sie den Wert der Variablen 'example' mit der ausgewählten Option festlegen. Wenn der ausgewählte Wert geändert wird, setzen Sie 'refreshByExample' mit dem gleichen Wert wie' beispiel'. – mcrvaz

Ich bevorzuge Verwendung ng-options in diesen Situationen.

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

Und das Array wie

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

EDIT:

Das Beispiel mit Wert (wenn valueForRefreshedByExample1 kein String ist, verwenden 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>

Die exemples kann hier https://plnkr.co/edit/gfYak9zkKsAu0I5eQHx0?p=preview

gesehen werden

Quelle

2016-11-20 02:28:47

Ich schätze Ihre Antwort, aber ich kann das nicht tun. Ich kann nicht bearbeiten, wie der Code generiert wird. – mkmnstr

Was meinst du mit dir kann den Code nicht bearbeiten? –

Ich meine, dass der Code mir gegeben wird, wie es ist, ich kann es nicht ändern, um jetzt mit ng-Optionen generiert zu werden, deshalb kann das Array, das Sie vorschlagen, nicht verwendet werden. – mkmnstr

Bitte siehe unten Code, ich denke, es ist vielleicht das, was Sie suchen. Eine benutzerdefinierte Attributtyp-Direktive.

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>

Quelle

2016-11-20 02:41:29 alphapilgrim

AngularJS - Tag auswählen - Attribut aus der Option holen

Antwort

Verwandte Themen