オプションから私のコントローラに変数を渡す方法は？

Question

誰かに値の収集方法を教えてもらえますか？ドロップダウンボックスの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; 

    ; 
    }); 
}]); 

Answer 1

あります

（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

ディレクティブ

HTMLを使用して機能を選択した色を渡します

Answer 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; 
})