Question

我知道标题有点含糊不清但问题是：我在表单中有2个输入字段，如下所示：

<form name="modifyApp" class="form-signin" ng-submit="modify(val)">
   <input type="text" class="form-control" ng-model="val.name" id="appName">
   <input type="number" class="form-control" ng-model="val.number" id="number" min="0" max="65535">
   <button type="submit">Submit</button>
</form>

当我加载页面时，我在控制器内部填充了一些值：

angular.module('myApp').controller('modifyAppController', ['$scope', function($scope) {
    function setFields(appName, appNumber){
        document.getElementById("appName").value = appName
        document.getElementById("number").value = appNumber
    }

    $scope.modify= function(val){
        console.log(val)
    }
}])

问题是当我按提交按钮时。除非我更改它们，否则这些值不会被注册。例如，如果我按下提交按钮，则不会打印任何内容，但如果我更改了数字或名称，则会打印出来。

Answer 1

您需要重写控制器：

angular.module('myApp').controller('modifyAppController', ['$scope', function($scope) {
    $scope.val = {
        name = 'My app name',
        number = '1'
    };

    function setFields(appName, appNumber){
        $scope.val.name = appName;
        $scope.val.number = appNumber;
    }

    $scope.modify= function(){
        console.log($scope.val);
    }
}])

您无需直接修改Angular中的DOM值。您的模板中提供了所有$ scope变量。

Answer 2

为什么不将以下内容作为表单中的第一行

<form name="modifyApp" class="form-signin" ng-submit="modify()">

然后你的控制器看起来像这样

$scope.val = {
  name: '',
  number:0//some default values
}
$scope.modify= function(){
    console.log($scope.val)
}

Answer 3

在你的控制器中你可以像这样简单地初始化val对象：

angular.module('myApp', [])

.controller('modifyAppController', ['$scope', function($scope) {

  $scope.val = {
    name: '',
    number: 0
  };

  function setFields(appName, appNumber) {
    $scope.val.name = appName;
    $scope.val.number = appNumber;
  }

  $scope.modify = function(val) {
    console.log(val);
  };
}]);

Angular ng-model值未在提交时注册

3 个答案: