如何将变量从选项传递到我的控制器?

时间:2016-08-26 19:03:10

标签: javascript angularjs

有人可以告诉我如何收集值选择on.change下拉框,然后在控制器中使用该值作为变量。 由于某种原因,$ ColorPicked变量不会在$ scope.base = response.data.type中旋转。$ ColorPicked;但是,如果我只是删除$ ColorPicked并输入红色它没有问题。

对于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;

    ;
  });
}]);

2 个答案:

答案 0 :(得分: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;
})

答案 1 :(得分:0)

有两件事,

(i)您需要为ColorPicked定义$ scope变量才能提供默认选择。

(ii)你需要让ng-model绑定到变量。使用ng-change指令

将所选颜色传递给函数

<强> HTML:

 <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