Question

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

我不能这样做吗？我的意思就像显示输入到输入的实时文本应该存储到 $ scope.foo.bar ，因此它打印在控制台？

这是我尝试的内容：

<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'，而且有些快速与绑定到字符串值属性有关，例如<input>＆＃ 39; h {s value。

＆＃13;

// 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: []
}));

＆＃13;

令人惊讶的是，Angular的angular.isNumber功能并没有帮助我们处理这些奇怪的事情。正如文档中所述

确定引用是否为数字。这包括＆＃34;特殊＆＃34;数字NaN，+ Infinity和-Infinity。如果你想排除这些，你可以使用原生的`isFinite＆＃39;方法

参考：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>

这是一个例子

＆＃13;

<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>

＆＃13;

注意输入的原始类型始终是'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>

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

3 个答案: