AngularJS:用户在下拉列表中进行选择后的调用函数

时间:2016-10-22 18:42:00

标签: javascript html angularjs switch-statement readfile

所以我有一个下拉列表并添加了一些值,如下所示。 我希望程序根据下拉框中的选定选项执行操作。

angular.module('priceCalculator', [])
.controller("mainCtrl", ['$scope', function($scope) {
$scope.data = {
  availableOptions: [
    {id: 0, name: 'Please Select'},
    {id: 1, name: 'PVC Red Extra'},
    {id: 2, name: 'Alu Standard'},
    {id: 3, name: 'SKS Classic Decor'},
    {id: 4, name: 'SKS Aluminiu Alb'}
  ],

  selectedOption: {id: 0, name: 'Please Select'}
};
}]);

我以为我可以用switch语句

来做
$scope.doStuff = function() {
  switch(id from availableOptions) {
    case 0: 
    // do stuff, I want to read file based on inputs I shall also get from user
    break;
    default:
    // do stuff
  };
};

我该如何做?对不起,如果对每个人来说都很容易,我在编码方面真的很棒。

这是html部分

  <label>Select Shutter Type</label>
  <!-- Use ngOption to select shutter type -->
  <select ng-options="option.name for option in data.availableOptions track by option.id" ng-model="data.selectedOption">
  </select>

1 个答案:

答案 0 :(得分:0)

如果我理解正确,您希望在选择更改时调用doStuff函数。您可以使用ng-change执行此操作:

<select 
  ng-options="option.name for option in data.availableOptions track by option.id" 
  ng-model="data.selectedOption"
  ng-change="doStuff(option)">

然后你可以像这样声明doStuff

$scope.doStuff = function(selectedOption) {