使用 AngularJS 从输入中获取新值答案

【问题标题】：Get the new value from an input with AngularJS使用 AngularJS 从输入中获取新值
【发布时间】：2016-09-29 15:17:57
【问题描述】：

我正在尝试将一个 JQuery 网站转换为 AngularJS，但我无法弄清楚这一点。

在我使用的 JQuery 中：

$('.bet').change(function(e)  {
    // Do someting
};

我尝试用 AngularJS 做很多事情，但没有成功。
目前我的 HTML 中有这个，而我的 Angular 文件中没有任何相关内容

index.php

<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="bet( {{bet}} )"/>

如何在 AngularJS 中做到这一点？

【问题讨论】：

您希望获得什么样的结果？当用户输入一些东西时，你想对这个值做什么？

标签： javascript jquery angularjs angularjs-directive

【解决方案1】：

来自文档：

当用户更改输入时评估给定的表达式。表达式会立即计算，这与 JavaScript onchange 事件不同，它仅在更改结束时触发（通常是当用户离开表单元素或按下返回键时）。

所以基本上你需要将一个函数绑定到一个ng-change 属性，像这样：

<input type="number" name="bet" placeholder="Your bet" ng-model="bet" ng-change="betChanged(bet)"/>

以及控制器中的监听器：

$scope.betChanged = function(bet){
   //do something...
   console.log(bet);
}

这样，每次下注发生变化时都会调用 betChanged，就像原生 javascript input 函数一样。

【讨论】：

“很像原生 javascript 更改” 不是真的......更像是 'input' 事件。它甚至在您的文档引用中说
我的错，我会编辑我的答案。感谢您指出这一点。
绑定到ng-change 属性是正确的，但是将bet 传递给$scope.betChanged 是不必要的，因为您可以通过$scope.bet 访问相同的变量
是的，这是编码风格的问题：你说得对，这没有必要，但我认为更容易理解

【解决方案2】：

var myApp = angular.module('myApp',[]);

myApp.controller('myCtrl', ['$scope', function($scope) {
  $scope.bet = "";
  $scope.onBetChanged = function () {
    alert($scope.bet);
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="number" class="form-control" id="bet" name="bet" placeholder="Your bet" ng-model="bet" ng-change="onBetChanged()"/>
</div>

【讨论】：

请注意，ng-change 的响应与 jquery 更改不同

【解决方案3】：

$watch

怎么样？

<div ng-app="myApp" ng-controller="myCtrl">
        First Name:
        <input type="text" ng-model="firstName"><br>

        Full Name: {{firstName }}
    </div>
    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $window) {
            $scope.$watch('firstName', function (newValue, oldValue) {
                console.log('oldValue=' + oldValue);
                console.log('newValue=' + newValue);
                //do something
                $window.alert("Event fired");
            });
        });
    </script>

【讨论】：