2016-08-26 2 views
0

누군가가 값을 수집하는 방법을 보여줄 수 있습니까? 드롭 다운 상자의 on.change를 선택하고 그 값을 내 컨트롤러의 변수로 사용하십시오. 어떤 이유에서든 $ ColorPicked 변수는 $ scope.base = response.data.type에서 회전하지 않습니다. $ ColorPicked; 하지만 그냥 $ ColorPicked를 제거하고 Red로 입력하면 아무런 문제가 없습니다.옵션에서 내 컨트롤러로 변수를 전달하는 방법은 무엇입니까?

저는 Angular와 JS에 대해서는 아직 너무 익숙해서 제 어리 석음을 용서해주십시오. 나는 뚜렷한 답을 얻기 위해 인터넷 검색을하고 인터넷 검색을했고 나는 아무것도 얻지 못했다.

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; 

    ; 
    }); 
}]); 

답변

0

있습니다를 두 가지,

(i) 기본 선택을 제공하기 위해 ColorPicked에 대해 $ scope 변수를 정의해야합니다.

(ii) 변수에 바인드되는 ng-model이 필요합니다.

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

컨트롤러 :

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

DEMO

Working Demo for your requirement

ng-change 지침

HTML을 사용하여 함수에 선택한 색상 통과

+0

downvote에 대한 이유를 제공하십시오! – Sajeetharan

+0

IDK 누가 당신을 downvoted하지만 나는 이들 중 하나를 작동하지 않습니다. 다시 말하지만, 저는 이것에 익숙하지 않아 드롭 다운 값을 얻은 다음 $ scope.base = response.data.type에서 그 값을 사용하는 명확한 방법이 필요합니다. $ ColorPicked; –

+0

@SamBush 그냥 ng-change 함수 내에서 호출하십시오. $ scope.base = opt; – Sajeetharan

2

당신은 컨트롤러의 속성에 선택된 값을 바인딩 ng-model를 사용해야합니다. 당신이 모델에 값으로 선택 입력을 초기화 할 경우에, 당신은 ng-options

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

를 사용해야 및 컨트롤러에 당신은 당신의 범위에서 다음과 같은 것이다 :

$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; 
}) 
관련 문제