如何将输入值绑定到角度 js 中的 $scope 对象？

Question

我是 Angular JS 的新手，我想将输入值绑定到 $scope 对象，就像我们使用 ng-bind 和 ng-model 进行输入一样将它们的值绑定到 DOM 的字段（当我们在输入中键入内容时，值会发生变化）。

我不能这样做吗？我的意思是，就像显示输入到输入中的实时文本一样，应该将其存储到 $scope.foo.bar 并因此打印在 console 中？

这是我正在尝试的：

<script type="text/javascript">
    var app = angular.module("testApp", []);
    app.service("stringService", function(){
        this.myFunction = function(word){
            return word.toUpperCase();
        };
    });
    app.controller("control", function($scope, $location, stringService, $http){
        $scope.age=24;
        $scope.foo = {bar: "hello"};
        console.log($scope.foo.bar);
        $scope.isNumber = angular.isNumber($scope.foo.bar);
    });

</script>

<div ng-app="testApp">
    <div ng-controller="control" ng-init="obj=[{name:'vikas'}, {name: 'vijay'}, {name: 'vinay'}]; mySwitch=true">
        <form name="testForm">
            <input type="text" name="bar" ng-model="foo.bar" required>
        </form>
        <div>{{isNumber}}</div>
    </div>
</div>

我可以在控制台中看到初始值（hello），在 DOM 中看到 false。但它没有更新。

Answer 1

这行$scope.isNumber = angular.isNumber($scope.foo.bar); 只会运行一次，在角度初始化页面时。

您可以将isNumber 更改为函数以便多次调用。

$scope.isNumber = function() {
  return angular.isNumber($scope.foo.bar);
}

在模板中调用它：

<div>{{isNumber()}}</div>    

var app = angular.module("testApp", []);
app.service("stringService", function() {
  this.myFunction = function(word) {
    return word.toUpperCase();
  };
});
app.controller("control", function($scope, $location, stringService, $http) {
  $scope.age = 24;
  $scope.foo = {
    bar: 1
  };
  console.log($scope.foo.bar);
  $scope.isNumber = function() {
    console.log(Number.isFinite($scope.foo.bar));
    console.log(typeof($scope.foo.bar));
    return angular.isNumber($scope.foo.bar);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="testApp">
  <div ng-controller="control" ng-init="obj=[{name:'vikas'}, {name: 'vijay'}, {name: 'vinay'}]; mySwitch=true">
    <form name="testForm">
      <input type="text" name="bar" ng-model="foo.bar" required>
    </form>
    <div>{{isNumber()}}</div>
  </div>
</div>

Answer 2

虽然@Pengyy 说您需要将数据绑定到函数是非常正确的，但这只是问题的一部分......

问题是NaN，这是一个令人费解的数值，它不是数字，但具有'number' 类型，并且与绑定到字符串值属性（如html 中的<input> 的value）有关。

// the constant NaN
console.info(NaN);
// the type of the constant NaN
console.info(typeof NaN);
// NaN is not equal to NaN 
console.info(NaN === NaN);
// Number.isNaN checks for NaN
console.info(Number.isNaN(NaN));
// Number.isNaN returns false for any value unless typeof value === 'number'
console.info(Number.isNaN({
  a: []
}));

令人惊讶的是，Angular 的 angular.isNumber 函数并不能帮助我们处理这些怪事。如文档中所述

确定引用是否为数字。 这包括“特殊”数字 NaN、+Infinity 和 -Infinity。 如果你想排除这些，那么你可以使用原生的 `isFinite' 方法。

参考：https://docs.angularjs.org/api/ng/function/angular.isNumber

更糟糕的是，它还会忽略 typeof value !== 'number' 的所有值

最后，要克服的最后一个障碍是 HTML 输入的值始终是 string！这意味着我们需要将其转换为数字。

因此，函数需要看起来像

$scope.isNumber = function(n) {
  // must convert to number because `Number.isNaN` does not coerce
  return isFinite(n) && !Number.isNaN(Number(n));
}

和绑定一样

<div>{{isNumber(foo.bar)}}</div>

这是一个例子

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript">
  (function() {
    "use strict";

    var app = angular
      .module("testApp", [])
      .controller({
        MyController
      });

    MyController.$inject = ['$scope'];

    function MyController($scope) {
      $scope.foo = {
        bar: "hello"
      };
      console.log($scope.foo.bar);
      $scope.isNumber = function(n) {
        console.info(typeof n);
        return isFinite(n) && angular.isNumber(Number(n));
      }
    }
  }());
</script>

<div ng-app="testApp">
  <div ng-controller="MyController">
    <form name="testForm">
      <input type="type" name="bar" ng-model="foo.bar" required>
    </form>
    <div>{{isNumber(foo.bar)}}</div>
  </div>
</div>

注意输入的原始类型总是'string'

Answer 3

值必须在更新，但您没有任何要交流的东西，您需要一个观察者或一个触发控制台日志并检查数字的函数。

将您的控制器更改为：-

 app.controller("control", function($scope, $location, stringService, $http){
            $scope.age=24;
            $scope.foo = {bar: "hello"};
            console.log($scope.foo.bar);
            $scope.isNumber = angular.isNumber($scope.foo.bar);
            $scope.check = function() {
                $scope.isNumber =  angular.isNumber($scope.foo.bar);
                console.log($scope.foo.bar);
                console.log($scope.isNumber);
            }
        });

在 HTML 中

<input type="type" name="bar" ng-model="foo.bar" ng-change="check()" required>