2016-08-26 3 views
0

Kann mir jemand zeigen, wie man den Wert sammelt, wählen Sie on.change der Dropdown-Box und verwenden Sie dann diesen Wert als Variable in meinem Controller. aus irgendeinem Grund wird die $ ColorPicked-Variable nicht in $ scope.base = response.data.type rotieren. $ ColorPicked; ABER wenn ich nur das $ ColorPicked lösche und rot einfüge funktioniert das kein Problem.Wie übergebe ich eine Variable von einer Option an meinen Controller?

Ich bin immer noch sehr neu zu Angular und JS für diese Angelegenheit also bitte entschuldigen Sie meine Dummheit. Ich habe gegoogelt und gegoogelt für eine klare Antwort und ich habe nichts.

INDEX.HTML 
<h3>Color:</h3> 
<select class="formBoxes" id="ColorPicked"> 
<option value="Red">Redd</option> 
<option value="Blue">Blue</option> 
<option value="Green">Green</option> 
</select> 

SCRIPT.JS 
$ColorPicked = "Red"; 

var app = angular.module("computer",['ngRoute']) 
.config(['$routeProvider', function($routeProvider){ 
    $routeProvider. 
    when('/main',{ 
     templateUrl: 'archetype.html', 
     controller:'MainCtrl' 
    }). 
    otherwise({redirectTo:'/main'}) 
}]) 

.controller('MainCtrl', ['$scope', '$http', function($scope, $http){ 
    $http.get('archetype.json').then(function(response){ 

    $scope.base = response.data.type.$ColorPicked; 

    ; 
    }); 
}]); 

Antwort

0

Es gibt zwei Dinge,

(i) Sie müssen eine $ scope-Variable für die definiert haben, um die Standardauswahl zu bieten.

(ii) Sie müssen ein ng-Modell haben, das an die Variable gebunden wird. Übergeben Sie die ausgewählte Farbe auf die Funktion unter Verwendung der ng-change Richtlinie

HTML:

<select ng-model="ColorPicked" ng-change="setItem(ColorPicked)"> 
     <option>Red</option> 
     <option>Blue</option> 
     <option>Green</option>  
    </select> 

Controller:

function MyCtrl($scope) { 
    $scope.ColorPicked = "Red";  
    $scope.setItem = function(opt) { 
    $scope.base =opt; 
    } 
} 

DEMO

Working Demo for your requirement

+0

Gründe für den Downvote! – Sajeetharan

+0

IDK, der Sie abgelehnt hat, aber ich kann keinen von beiden zur Arbeit bekommen. Noch einmal, ich bin neu und ich brauche eine klare Möglichkeit, um den Wert der Dropdown zu erhalten und dann diesen Wert in $ scope.base = response.data.type. $ ColorPicked; –

+0

@SamBush Rufen Sie dies einfach innerhalb der ng-change-Funktion auf, $ scope.base = opt; – Sajeetharan

2

Sie müssen ng-model verwenden, um den eingestellten Wert des Controllers Eigenschaft zu binden. Wenn Sie die Auswahl-Eingang auf einen Wert auf dem Modell initialisieren wollen, dann müssen Sie ng-options

<select ng-model="selectedColor" 
     ng-options="opt.value as opt.label for opt in opts"> 
</select> 

und in Ihrem Controller verwenden, würden Sie die folgenden auf Ihrem Umfang haben:

$scope.opts = [ 
    { value:'red', label:'Red' }, 
    { value:'blue', label:'Blue' }, 
    { value:'green', label:'Green' }, 
] 

$http.get(...).then(function(response){ 
    $scope.selectedColor = response.data.type.$colorPicked; 
}) 
Verwandte Themen