更新输入值答案

【问题标题】：Update input value更新输入值
【发布时间】：2017-05-05 14:43:59
【问题描述】：

我正在使用 AngularJS 构建鼓机，但在从用户界面调整速度时遇到了问题。

我有对象“this.tempo=120”和“<input class="bpm-input" type="number" onchange="updateBPM()" min="100" max="150" ng-model="$ctrl.tempo"></input>”

这似乎并没有更新tempo的值，只是输入框中显示的值。

我需要什么函数来更新控制器中的值？

【问题讨论】：

标签： javascript angularjs input

【解决方案1】：

正常，在使用AngularJS时，需要使用Angular WAY。

换句话说，Angular 为你做的事情是唯一的方法。

AngularJS 彻底控制您的 DOM 并将其用作副本。

如果在没有 angular 行为的情况下更改 DOM，则 angular 无法更新他的副本并引发不良行为。

你需要使用所有 Angular 的东西，告诉他在你的 DOM 上应用他的魔法。

通过 ng-click 角度指令更改您的 onclick 属性，将您的 updateBPM 放入您的控制器范围，这样就可以了。

希望对你有帮助！

【讨论】：

【解决方案2】：

你可以做的基本事情就像附加的 sn-p 一样，也可以尝试使用 Angular 模式来获得可管理的代码库和良好的性能Patterns

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myController as myCtrl">

    <input class="bpm-input" type="number" ng-change="myCtrl.updateBPM()" min="100" max="150" ng-model="myCtrl.tempo"></input>
    
 
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
    var myCtrl = this;
    myCtrl.tempo=120;
    myCtrl.updateBPM = function(){
    alert(myCtrl.tempo);
    }    
});
</script>
</body>
</html>

【讨论】：

【解决方案3】：

代码附在下面

<script>
    var mainModule = angular.module('mainModule', [])
    .controller('mainCntrl', function($scope) {
      var vm = this;
      vm.tempo = 120;
    });
</script>


<div ng-app="mainModule">
  <div ng-controller="mainCntrl as ctrl">
    <input class="bpm-input" type="number" min="100" max="150" ng-model="ctrl.tempo"></input>
  </div>
</div>

【讨论】：