时间戳

首页 > 解决方案 > 从 ng-change 函数 angularjs 获取变量

angularjs - 从 ng-change 函数 angularjs 获取变量

问题描述

I eventually need to create a select box with 4 options - Module 1 to 4. When an option is selected I need to send the number which was selected to the controller so that it can return different datasets for a chart.

这是最终目标，但是尝试使用不同的代码笔我将问题简化为只是尝试从输入框中获取变量。

我可以让值出现在模板上，但我无法在控制器中访问它。如何使控制器中的功能与传递的输入数据一起工作？

html

<body ng-app="plunker" ng-cloak>
<div ng-controller="MainCtrl">
  <h1>Hello {{name}}</h1>
  <p>Start editing and see your changes reflected here!</p>
</div>

<input placeholder="Module" type="text" ng-change="moduleChange(myModule)"
       ng-model="myModule" ng-model-options="{debounce: 1000}">

{{myModule}}
</body>

脚本.js

angular.module('plunker', []).controller('MainCtrl',
  function($scope) {
     $scope.name = 'Plunker';
     $scope.moduleChange = function(myModule) {
          alert(myModule);
          console.log(myModule);
          $scope.name = myModule;
     }
});

我以为每次更改输入时都会收到警报，但什么也没发生。控制台没有记录任何内容，并且 $scope.name 变量似乎没有改变。

我哪里错了？谢谢

此外，使其在选择框中工作的任何指针也很棒！

plunkr

标签： angularjs

解决方案

移动ng-controller="MainCtrl"到外部元素（这就是函数没有被触发的原因）：

<body ng-app="plunker" ng-controller="MainCtrl" ng-cloak>

您不需要将值传递给函数，您的值具有ng-model：

<input placeholder="Module" type="text" ng-change="moduleChange()" ng-model="myModule" ng-model-options="{debounce: 1000}">

$scope.moduleChange = function() {
          alert($scope.myModule);
          console.log($scope.myModule);
          $scope.name = $scope.myModule;
  }

推荐阅读